Is it possible to use horizontal scrolling rather than text wrapping in a code section highlughted with pygments when working in Jekyll.
Source of document:
{% highlight bash %}
Full thread dump OpenJDK Client VM (19.0-b09 mixed mode, sharing):
"Attach Listener" daemon prio=10 tid=0x0a482400 nid=0x5105 waiting on condition [0x00000000]
java.lang.Thread.State: RUNNABLE
....
{% endhighlight %}
Generated page (Notice the hex address being wrapped rather than scrolled):
Find your highlight.css at:
/PROJECT_ROOT/assets/themes/THEME_NAME/css/highlight.css
and add this line at the end:
pre { white-space: pre; overflow: auto; }
Thanks #manatwork for the solution.
this answer deals specifically with using pygments and jekyll on github pages
the highlighting is generated thusly:
<div class="highlight">
<pre>
<code>
... pygments highlighting spans ...
</code>
</pre>
</div>
the css that will get you where you want is:
// -- selector prefixed to the wrapper div for collision prevention
.highlight pre code * {
white-space: nowrap; // this sets all children inside to nowrap
}
.highlight pre {
overflow-x: auto; // this sets the scrolling in x
}
.highlight pre code {
white-space: pre; // forces <code> to respect <pre> formatting
}
I was using Jekyll and Twitter Bootstrap, and the following is what worked for me in the end:
.highlight pre {
word-wrap: normal;
}
.highlight pre code {
white-space: pre;
}
As for me, using the latest and greates Jekyll & highlighter releases, this nailed the issue:
/* Make code block overflow */
.highlight pre {
display: inline-block;
}
Related
I'm using the following HTML and CSS on Chrome since April 2021, it was working
<head>
<style>
x-sentence {
border-bottom: solid;
}
x-word {
display: inline-flex;
flex-direction: column-reverse;
}
x-word::after {
content: '🌍';
}
</style>
</head>
<body>
<x-sentence>
<x-word>Hello world</x-word> nice view <x-word>there</x-word>
</x-sentence>
</body>
It is still working on Safari (both macOS and iOS):
It is working on older version of Chrome, e.g. version 107(November 28, 2022)
Reference: https://github.com/chinese-words-separator/chinese-words-separator.github.io/issues/5
However, on latest version of Chrome (109), the above HTML and CSS no longer works:
Please do note that a problem (border-bottom) can be fixed by using non-custom tags, e.g., changing the x-sentence custom tag to div class='x-sentence'; the text "nice view" is still erroneously aligned even when x-word custom tag is changed to span class='x-word though. However, I'm using custom tags so that my Chrome extension and Safari extension can prevent CSS and style collision problems with the page, I still prefer to solve the problem while still using custom tags
Did Chrome 109 introduced a bug? Or was I relying on non-standard HTML behavior for custom tags?
Is it possible to fix the problem while still using custom tags?
UPDATE 2023-Jan-28
Problem solved by fubar
The change needed so that things works like it was pre-Chrome 109:
vertical-align: ${guideOnTop ? 'text-bottom' : 'baseline'};
The added code has no side effects on Safari, works on Safari too
I'm wondering whether the default styles for otherwise unstyled elements changed in Chrome. Adding a little more CSS fixes the issue.
<head>
<style>
x-sentence {
border-bottom: solid;
display: inline-block;
}
x-word {
display: inline-flex;
flex-direction: column-reverse;
vertical-align: bottom;
}
x-word::after {
content: '🌍';
}
</style>
</head>
<body>
<x-sentence>
<x-word>Hello world</x-word> nice view <x-word>there</x-word>
</x-sentence>
</body>
Is there any possibility how to target HTML tag <title> in CSS for content: ""?
It would be pretty neat to control both the <h1> and the title of the page by one attribute.
I've tried something like
title::before{
content: "Hello world"
}
If this won't be possible, what other solution might be appropriate?
Thanks!
You sure can, in fact, as all elements in a HTML document are plain <tags> they can be made visible and get id, class, style (inline or style block) or any other selector attribute, whether global or custom. Even contenteditable and make them runtime editable (won't work on <script>, though).
Below a snippet displaying <title> with pseudo selectors.
...And if you really want to dig into showing runtime styles, links and javascript check out this Codepen I created some time ago. Beware, not for beginners. Hit the bottom/right [show styles] button in the pen and see the magic happen...
<html>
<head>
<title>Document Title, quite long some we can forse a line break (well, on smaller windows anyway...)</title>
<style>
/* Because it is hidden by default */
head {
display: block;
}
title {
display: block; /* default hidden too */
width: 100%;
min-height : 2rem;
line-height: 2rem;
hyphens: auto;
cursor: pointer; overflow: hidden;
font-size: larger; text-align: center;
background-color: hsl(45,100%,50%);
}
title::before { content: 'Before: ' ; font-weight: bold }
title::after { content: ' :The End!'; font-weight: bold }
body { background-color: Gainsboro }
</style>
</head>
<body>
<p>Some regular paragraph element</p>
</body>
</html>
A script element that got styled as display:block appears visible. Why is it possible and is there any real use case where it is desired?
td > * {
display: block;
}
<table>
<tr>
<td>
<script type="text/javascript">
var test = 1;
</script>von 1
</td>
</tr>
</table>
The HTML5 specification defines a style sheet that user agents (like browsers) are expected to use. Section 10.3.1 lists the styles for "Hidden elements":
#namespace url(http://www.w3.org/1999/xhtml);
[hidden], area, base, basefont, datalist, head, link,
meta, noembed, noframes, param, rp, script, source, style, template, track, title {
display: none;
}
embed[hidden] { display: inline; height: 0; width: 0; }
As you can see, it applies display: none; to script.
This is the only "barrier" between your users and hidden script elements. It’s perfectly fine and intended to be able to overwrite styles from user-agent style sheets within author style sheets (and of course also within user style sheets).
Why someone might want to use it? One use case is displaying content without having to escape characters like </>, similar to the old xmp element. The script element can be used not only for scripts, but also for data blocks (i.e., for anything with a MIME type).
Why can <script> Tags be visible?
Because they are HTML elements like any other and there is no reason to write special case rules in the HTML specification (which would add complexity) to prevent CSS from applying to them.
Any element can be styled. Take, for example:
head { display: block; }
title { display: block; }
meta { display: block; }
meta[charset]:after { display: block; content: attr(charset); }
meta[content]:after { display: block; content: attr(content); }
Is there any Usecase where it is wanted?
Certainly no common ones, but general rules aren't designed to make sense for everything that you can apply them to. They are designed for the common cases.
Another (not common) use case:
I sometimes use <script> tags for brief HTML code examples in style guides. That way I don't have to escape HTML tags and special characters. And text editor tag autocomplete and syntax highlighting still work. But there's no easy way to add syntax highlighting in the browser.
script[type="text/example"] {
background-color: #33373c;
border: 1px solid #ccc;
color: #aed9ef;
display: block;
font-family: monospace;
overflow: auto;
padding: 2px 10px 16px;
white-space: pre-wrap;
word-break: break-all;
word-wrap: break-word;
}
<p>Here comes a code example:</p>
<script type="text/example">
<div class="cool-component">
Some code example
</div>
</script>
Possible use case: for debugging purposes.
You could apply a class at the document level, eg. <body class="debugscript">, then use some CSS:
body.debugscript script {
display: block;
background: #fcc;
border: 1px solid red;
padding: 2px;
}
body.debugscript script:before {
content: 'Script:';
display: block;
font-weight: bold;
}
body.debugscript script[src]:before {
content: 'Script: ' attr(src);
}
Script tags are hidden by default by using display:none;. Unor1 explains the underlying language specification. However, they are still part of the DOM and can be styled accordingly.
That said, it is important to keep in mind exactly what a script tag is doing. While it used to be accompanied by types and languages, that is no longer required. It is now assumed that JavaScript is in there, and as a result browsers will interpret and execute the script as it is encountered (or loaded) from these tags.
Once the script has been executed, the content of the tag is only text (often hidden) on the page. This text can be revealed, but it can also be removed because it is just text.
At the bottom of your page, right before the closing </html> tag, you could very easily remove these tags along with their text and there would be no changes to the page.
For example:
(function(){
var scripts = document.querySelectorAll("script");
for(var i = 0; i < scripts.length; i++){
scripts[i].parentNode.removeChild(scripts[i]);
}
})()
This will not remove any functionality, as the state of the page has already been altered and is reflected in the current global execution context. For example, if the page had loaded a library such as jQuery, removing the tags will not mean that jQuery is no longer exposed because it has already been added to the page's runtime environment. It is essentially only making the DOM inspection tool not show script elements, but it does highlight that the script elements once executed really are only text.
1. unor, Thu Jul 07 2016, wutzebaer, "When should tags be visible and why can they?", Jul 1 at 10:53, https://stackoverflow.com/a/38147398/1026459
I want to use a custom style for code snippets in my blog. I defined the following style:
mystyle {
background: #C3FFA5;
border: solid 1px #19A347;
color: #191919;
display: block;
font-family: monospace;
font-size: 12px;
margin: 8px;
padding: 4px;
white-space: pre;
}
I use it as follows:
<mystyle>
int main() {
cout << "Hello World" << endl;
}
</mystyle>
This gives the following output. I have tried on Firefox and Google Chrome.
I want to remove the extra line at the start of the block. Obviously, I understand where the newline comes from, and that I can use <mystyle>int main() { instead. If I use <pre> instead of <mystyle>, there is no extra newline, so is it possible to do this with my custom style too?
Check out the answer to this very similar question:
.mystyle:first-line {
line-height: 0px;
}
Might require a modern-ish browser, though.
Adjust margin-top to whatever line-height you have set.
.text {
margin-top: -1em;
white-space: pre-line;
}
This works for FF too, which :first-line hack can't fix.
When we use white-space: pre-wrap, then when the page renders, it also takes space from your html file. So suppose we have:-
<div style="white-space:pre-wrap"> <!-- New Line -->
<!-- 2 space --> This is my text
</div>
The text will render in this way:-
<leading line>
<2 spaces >This is my text
Hence we should HTML like this:-
<div style="white-space:pre-wrap">This is my text</div>
Add the style to the <pre> tag, using a class. For example (trying to keep it simple here).
<pre class="console">
// Some code here to be styled.
</pre>
<pre class="some-other-style">
// Some code here to be styled.
</pre>
Then your CSS looks like this:
pre.console {
color: #fff;
background-color: #000;
}
pre.some-other-style {
color: #f00;
background-color: #fff;
}
If it doesn't do what you want then I'm confused by your question, just comment and I'll remove the answer.
This is for you who want to remove the trailing space only from the first line of the formatted output
instead of writing the code like this
<pre>
This is my code </pre>
write it like this
<pre>This is my code</pre>
or in case you are using a <div> tag as shown below
<div style="white-space:pre-wrap">
This is my code
</div>
write it like this
<div style="white-space:pre-wrap">This is my code</div>
Code formatting is at the essence here, make sure each line start at the first character of that line:
<pre class="code">
int main() {
cout << "Hello World" << endl;
}
</pre>
The following CSS will suffice:
pre.code
{
background: #C3FFA5;
border: solid 1px #19A347;
color: #191919;
display: block;
font-family: monospace;
font-size: 12px;
margin: 8px;
padding: 4px;
}
Read this article on whitespace, and the following on how to 'fight it'. Although the last article discusses whitespace between inline elements, the formatting solution relates to your issue.
How about
<mystyle>into main() {
// ...
}</mystyle>
No white space before or after...
Just fix your template, man. Thats easiest way:
<mystyle>int main() {
cout << "Hello World" << endl;
}</mystyle>
Not a pure CSS solution but works for me:
<script>
document.querySelectorAll('pre').forEach((e) => {
e.innerHTML = e.innerHTML.trim();
})
</script>
This solution works for me when dealing with white-space: pre-line.
Add span inside white-space element.
<p class="whitespace-pre-line">
<span>Your text goes here</span>
</p>
I'm using CSS (via JQuery , but not relevant to this question) to highlight certain elements within an HTML file: I'm using "pre" tags to separate out logical elements in my file, but I noticed that "pre" tags seem to leave newlines between elements.
Can I get rid of these using CSS ?
(Or what shall I use instead of "pre" tags? The text elements may contain HTML elements themeselves : which should not be rendered, and should be shown literally as source-code: hence my initial choice with "pre" tags)
Here's an example of the HTML I'm using: (Requires http://docs.jquery.com/Downloading_jQuery for this example)
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js">
</script>
</head>
<body>
<pre class="error">
This is an error line.
stack.trace.blah.blah
more.blah.blah
yadda.yadda.blah</pre>
<pre class="ok">
this is not an error line.it contains html
<html><head></head><body>hello</body></html></pre>
<pre class="error">
This is an error line.
stack.trace.blah.blah
more.blah.blah
yadda.yadda.blah</pre>
<pre class="ok">
<script type="text/javascript">
$("pre.error").css({"background-color":"red","color":"white","display":"block","padding":"0", "margin":"0"});
</script>
</body>
</html>
I'm using Firefox 3.6.12.
This is what the code above results in:
And this is simulated output of what I want (switched to yellow, only because I used my vim editor to this, pretend it's red!)
SOLUTION:
Is to use 'display:inline' for all PRE tags. (Previously I was only applying the 'display:inline' to the 'error' tags in the example above, and had forget to do the same for 'ok' pre tags.
That's because <pre> has a default style display: block, use in your css pre { display: inline}
as for your edit, you need to add margin: 0; to ALL the pre blocks, not just the ones you want to style:
pre {
display: inline;
margin: 0;
}
You should try to avoid styling with JS whenever possible, but if you really must:
<script type="text/javascript">
$("pre.error").css({"background-color":"red","color":"white","display":"block","padding":"0", "margin":"0"});
$("pre").css({ "margin" : 0, "padding" : 0 })
</script>
The pre tag is a block level element, so it will behave like any other block level element and stack vertically (like paragraph, div, etc). You can set it to display:inline instead, I guess.
But better would be to use the <code> tag, which is inline by default.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code
You can force the pre tag to be a inline element by adding this in head:
<style type='text/css'> pre {display: inline;} </style>
You can fix with css as follow
pre {
width: 600px; /* specify width */
white-space: pre-wrap; /* CSS3 browsers */
white-space: -moz-pre-wrap !important; /* 1999+ Mozilla */
white-space: -pre-wrap; /* Opera 4 thru 6 */
white-space: -o-pre-wrap; /* Opera 7 and up */
word-wrap: break-word; /* IE 5.5+ and up */
}
Why are you using jQuery for something that can be achieved via CSS?
<html>
<head>
<style type="text/css">
pre {
display: block;
padding: 0;
margin: 0;
}
pre.error {
background-color: red;
color: white;
}
</style>
</head>
<body>
<pre class="error">
This is an error line.
stack.trace.blah.blah
more.blah.blah
yadda.yadda.blah</pre>
<pre class="ok">
this is not an error line.it contains html
<html><head></head><body>hello</body></html></pre>
<pre class="error">
This is an error line.
stack.trace.blah.blah
more.blah.blah
yadda.yadda.blah</pre>
</body>
</html>
pre { margin: 0; }
should give you the rendering in the second picture. Your snippet probably doesn't work because you don't remove the default margin from the pre.ok.
You can convert HTML source to use special chars instead of < > (like < >). You can do this with notepad++ using TextFX Plugin (Encode HTML) or in eclipse you can do this with anyedit tools.
you can use padding:0 and margin:0 for pre in css
Don't use pre, instead escape the characters you want to display literally. Like < and > for < and >.
When you render your page, you can use a function like htmlentities() (PHP) to escape these characters for you.