How can I enable horizontal scrollbar for my fenced code blocks in jekyll using kramdown and rouge?
Is there any parameter I could add to my _config.yml file maybe? Essentially I want to mimic the code blocks from GitHub as shown below
But this is what I end up having instead
Any ideas?
This is a CSS overflow issue, not a Jekyll issue.
Add the following to your pre element:
pre {
overflow-x: auto;
}
As Brad West said this wasn't a kramdown issue after all. I just had to do the following modifications to my base CSS file
pre {
overflow: auto; /* I added this */
padding: 15px;
margin-bottom: 0;
font-size: 14px;
/* white-space: pre-wrap; I deleted this
word-wrap: break-word; and this
word-break: break-all; and also this */
}
Related
Recently I have been having a few issues with using a content editable div as a text box for a project I have been working on. The project is built with Angular2 on the front-end.
The issue I have been having is when I go to tab/space all the way to the end of the content editable div, rather than moving to the next line, it instead keeps adding tabs that appear to accumulate in the text content of the div. By that I mean, if I hit the tab/space key 4 times once it reaches the end, I will then have to backspace 4 times to clear them out.
<div class="text-box" contenteditable="true"></div>
body
{
background-color: black;
}
.text-box
{
background-color: white;
color: black;
height: 200px;
width: 200px;
margin: auto;
white-space: pre-wrap;
}
https://codepen.io/anon/pen/YxYNYW
The code pen I included demonstrates the issue. If you just click inside the box and then hold space bar, once the cursor gets to the end, it will not move to a newline. I realize it has something to do with the white-space: pre-wrap property I use with the content editable div. Is there anyway to get this to work while still being able to use that property?
I would like to keep the pre-wrap property because it preserves all the white-space that is brought in from objects with text in the database. I tried it with the pre-line property over pre-wrap but that caused the text to jump when clicking into the editable div. I also tried using word-break: break-all which seemed to work but then the text gets a little messed up.
Also on a side note, has anyone ever experienced an issue where they were unable to click between characters once the text was highlighted? This is kind of a weird issue to describe, and a tough one to track down apparently. What happens is I will type some text into the div, highlight it with my cursor, and then if I try to deselect the text by clicking in between characters, it will not work. I will have to click a line that is currently not highlighted or outside of the element entirely to deselect any highlighted text.
I originally thought maybe it was a content editable issue, but it seems to be working fine in the code pen I linked, so now I am not sure what it is.
Thanks in advance for the help!
You have to use word-break for solving your issue.Modify your css like following
body
{
background-color: black;
}
.text-box
{
background-color: white;
color: black;
height: 200px;
width:150px;
margin: auto;
white-space: pre-wrap;
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* css-3 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
word-break: break-word;
white-space: normal;
}
This solves your problem.Here is the working pen pen
Please reffer this ans for more info
I simply want to show terminal output on a Webpage. Atm I'm using a pre tag to do that with pre { white-space: pre-wrap; } as you can see upon http://irc.dabase.com/.
My problem is that when I rotate my iPhone6 IOS device, it often doesn't reformat properly. Why is this? Can you offer some good CSS rules to make this use case of showing terminal output on a Webpage better?
pre {
white-space: pre-wrap;
word-wrap: break-word;
text-align: justify;
}
Here are the rules you need explained step by step:
Select all pre elements (set this to pre#yourID or pre.yourClass to select a specific pre)
pre {
Allow pre to wrap at word breaks and line breaks. Unlike pre-line, pre-wrap will not modify your terminal output at all. pre-line will modify your terminal output by condensing whitespace into one whitespace which could make finding exact phrases difficult or mess with whitespace column formatting! See here
white-space: pre-wrap;
Make sure that words that go past the end of the element break off instead of being hidden (like links for examples)
word-wrap: break-word;
This part is optional Justify the text so that it fully fills the line. Spaces become wider but their number is not increased.
text-align: justify;
}
Optionally, this rule can be fit into a media-query so that it only applies in the mobile version. But I believe there is no harm in applying this rule to all screen sizes by simply omitting a media-query.
In the event that the wider version of your iphone makes your pre rule stop working, you should check to see if there isn't already a media-query in place that is applying a rule to the pre when the screen reaches a certain size.
You can also try intentionally creating a media-query for the wider version, which may re-initialize the styles if there is some kind of bug going on.
For example:
Include rule that applies to smallest possible version
Rule A:
pre {
white-space: pre-wrap;
word-wrap: break-word;
text-align: justify;
}
Then in addition to rule A include another rule to re-initialize styles at landscape orientation
Rule B:
#media all and (orientation:landscape)
pre {
white-space: pre-wrap;
word-wrap: break-word;
text-align: justify;
}
}
You can try this to achieve -
pre {
white-space: pre-line;
word-wrap: break-word;
}
pre {
white-space: pre-line;
word-wrap: break-word;
text-align: justify;
}
You Can Try It Once
This worked nicely for me when I had pre tag inside of a table and code below made pre tag stay responsive to the table column width. Credits to: https://techstacker.com/responsive-pre-tags-css/
pre {
white-space: pre-wrap;
word-break: break-all;
}
A website that I use on a regular basis does this. This causes way to much stuff to be on a single line and it goes off the screen. It needs to do word wrapping but what see below prevents it.
div.dbThreadDetailTreeRowCellItem {
white-space: nowrap;
}
https://stackoverflow.com/a/1258512/985898
I don't want to have to open firebird and fix it every time I go to the website. Is there hopefully an easy way to fix this with your css files? I am using firefox.
https://superuser.com/a/295806/93715
Firefox User Profile Folder --> Chrome -- > userChrome.css
I added this to my userChrome.css file. What do I need to add to my css file?
.break-word {
word-wrap: break-word;
}
-moz-hyphens: auto;
p
{
white-space:normal;
}
.u_nowrap {
white-space: normal !important;
}
pre { white-space: pre-wrap !important; }
Is there also a way to fix this issue in Chrome?
It doesn't look like any of your css rules apply to the container you said is causing the problem.
Try adding this line:
div.dbThreadDetailTreeRowCellItem{ word-wrap: break-word !important; white-space: normal !important; }
Hi! When the window is resized, the text automatically wraps to fit its container nicely. For this, I'm using this CSS code:
article {
overflow: auto;
word-wrap: break-word;
}
Though it seems, that this has no effect at all. When I remove this piece of code, the behavior doesn't change: the text is still wrapped near the end of the line.
I'm complaining about the huge gaps between words. I've observed a few webpages where no extra code is used for this and it still works nicely. Can you please help me get rid of the space? Thank you!
I agree that the text-align: justify has been inherited from the parent html tags.
You could also try modifying the CSS as follows:
article {
overflow: auto;
word-wrap: break-word;
text-align: start;
}
As mentioned in the comments article seems to be inheriting text-align: justify;. Here's a way to fix the alignment:
http://jsfiddle.net/awesome/zs394/2/
article, .unjust {
/* regular */
text-align: left;
/* super strength */
text-align: left !important;
}
Per the examples https://getbootstrap.com/docs/4.3/content/code/#code-blocks, bootstrap only supports vertically-scrollable and word-wrapped <pre> blocks out of the box. How do I make it so that I have horizontally-scrollable, unwrapped code blocks instead?
The trick is that bootstrap overrides both the white-space and the CSS3 word-wrap attributes for the <pre> element. To achieve horizontal scrolling, ensure there's this in your CSS:
pre {
overflow: auto;
word-wrap: normal;
white-space: pre;
}
This worked for me:
pre {
overflow-x: auto;
}
pre code {
overflow-wrap: normal;
white-space: pre;
}
I keep coming back to this answer when I start new projects and have to read through comments to remember, oh yea, don't override the bootstrap class and don't forget overflow-wrap, etc...
So you have the stock pre-scrollable, which is vertical only scrolling, you may also want:
Horizontal only scrolling
.pre-x-scrollable {
overflow: auto;
-ms-word-wrap: normal;
word-wrap: normal;
overflow-wrap: normal;
white-space: pre;
}
Vertical and Horizontal scrolling
.pre-xy-scrollable {
overflow: auto;
-ms-word-wrap: normal;
word-wrap: normal;
overflow-wrap: normal;
white-space: pre;
max-height: 340px;
}
Newer versions of Bootstrap apply styles to both pre and code that wrap words. Adding this to my stylesheet fixed the issue for me:
pre code {
white-space: pre;
word-wrap: normal;
}