Using kramdown and rouge for markdown syntax-highlighting in a jekyll blog, I'd like to prevent long lines of code from wrapping onto a new line. I'd like to be able to use a horizontal scrollbar to reveal the rest of the content.
Here is the jekyll config:
markdown: kramdown
kramdown:
input: GFM
syntax_highlighter: rouge
I'm using the base16.solarized.dark css theme generated by the rougify command.
Here is an example code usage:
```` js
console.log("some code") // and a really really long long long comment which i'd like to not wrap onto the next line
````
Boostrap is adding a white-space: pre-wrap rule in order to help code block readability.
If you want you code block to avoid this wrap, you can edit your css/data-creative.css and add
pre code{
white-space: pre;
}
You have somewhere a CSS rule that for the code element sets white-space: pre-wrap. Add the following rule to override it:
code {
white-space: pre;
}
I solved it like this:
pre {
...
overflow-x: scroll;
}
Related
I have an interactive grid in Oracle Apex tool. I need to wrap the heading without html tag.
Is it possible to do a word wrap on headers and cells ?
Try this CSS (you can put it in the page Inline CSS attribute):
.a-GV-table td, .a-GV-headerLabel {
white-space: normal;
}
That works for me.
I have a literal block consisting of a single long line. It is currently displayed as a single-line block with horizontal scrollbar (like the literal block below). How do you implement auto-formatting to wrap the line so it wraps dynamically when the browser is resized?
::
Long line that does not wrap...........................................................................................
This could be done by overriding the default CSS with a new style:
pre {
white-space: pre-wrap;
}
Edit your theme's CSS file to include this directive and it should just work.
How can I add CSS to github's markdown language?
I've been able to do so by using the style property inside html tags, like:
<p style="text-align: center;">This is some random text</p>
But if I move the css to the beginning, like:
<style>
p {
text-align: center;
}
</style>
<p>This is some random text</p>
Github doesn't recognize it, and just writes to the screen the css code.
I'm using Atom, and the package Markdown Preview actually recognizes this correctly, even though on the remote repository it shows wrong. And so does the Google Chrome extension Markdown Preview Plus.
Is there a way to do this? Writing css within html tags just feels plain wrong.
After GitHub converts Markdown to HTML,
The HTML is sanitized, aggressively removing things that could harm you and your kin—such as script tags, inline-styles, and class or id attributes. See the sanitization filter for the full whitelist.
style tags are not included in GitHub's whitelist, so they are removed. I'm actually surprised that inline style attributes work; they don't seem to be included in the whitelist, either, and are explicitly mentioned in the previous paragraph.
In any case, GitHub does not permit arbitrary HTML to be included in Markdown.
Here is how you can accomplish what you're looking for. As the other answer states, Github doesn't support this syntax, but if you pop this Markdown into another preview tool you'll see that the bullets are removed from this list.
|Signal|Description|
|---|---|
|DOP|Horizontal Dilution of precision|
|FIX|GPS Fix Quality indicator: <ul style="list-style-type:none;"><li>0 - fix not available</li><li>1 - GPS fix</li></ul>|
Signal
Description
DOP
Horizontal Dilution of precision
FIX
GPS Fix Quality indicator: 0 - fix not available1 - GPS fix
You can trivially override what CSS Github uses by supplying it with your own style.css file, nested as ./assets/css/style.css (which is stylesheet URL that gets pointed to in the HTML source code that Github build off of your markdown).
Note that if you want to just "add" any CSS, you'll want to copy Github's CSS first, so you can create a file with the same content after which you place your own rules. You can find this on any view-source:https://username.github.io/repo-name/assets/css/style.css with the obvious replacements for username and repo-name.
E.g.
/* CSS as copied from github's own stylesheet here, which is all one line anyway */
...
/* And then your own CSS */
/* remove the repo name as some kind of weird super-title */
h1:first-child { display: none }
/* and better emphasise the _real_ title */
h1:nth-child(2) { font-size: 3em; }
/* let's also give images a subtle border */
img { border: 1px solid #DDD; }
In Jekyll, when I set the Markdown converter to kramdown and bundle exec jekyll serve, this fenced code block
```javascript
function hey(name) {
return 'Hey ' + name;
}
console.log(hey('Brienna'));
```
renders like this:
This happens no matter what I do. I've tried setting the input: GFM option, but it doesn't make a difference whether or not it's included.
However, when I set the Markdown converter to Redcarpet, the same code block renders like this:
This is what I want to see! But I don't want to use Redcarpet. I want to use kramdown.
As you can see from the rendered HTML below, the code block gets highlighted. I'm using a CSS stylesheet for Pygments, which Rouge is supposed to be able to work with. I noticed that the div's class changed between Markdown converters. With kramdown, its class is .highlighter-rouge, whereas with Redcarpet, its class is just highlight. Do I need to manually modify the CSS if switching between Markdown converters?
Kramdown:
Redcarpet:
Your Pygments CSS file looks like this:
.highlight { font-size: 13px; }
div.highlight, div.highlight code, div.highlight pre { background: #29281e; }
div.highlight code { padding: 0; }
div.highlight .c { color: #75715e } /* Comment */
In the Kramdown output, the .highlight block is no longer a <div>, so simply removing all "div" instances from the CSS would restore syntax highlighting.
Bonus: without specifically targeting <div>, your CSS now works with output of both Markdown processors.
For the fenced code blocks to work in Kramdown, you need to turn on recognition of GitHub Flavored Markdown:
kramdown:
input: GFM
Note that Jekyll reads _config.yml only once at execution time. You need to restart jekyll serve for further changes to apply.
How do I control the width or responsive width of the CODE tag in a Wordpress post?
Under the comments section on this post, the text, "You may use these HTML tags and attributes:" and the code elements after it, doesn't fit the width of the container of this responsive website design.
This line of code examples simply extends out past the container it's in. Here's the post I'm working on:
http://www.flippinlaw.com/what-is-sound-financial-advice.html
I've noticed the issue in 3 different browsers and it seems to be a bootstrap related style. Any help is appreciated greatly. Thanks!
Please remove white-space: nowrap; from code on bootstrap.css line #983
It is safe to disable your code { display: block; } too
Adding display:block to the code tag looks to work for me
code {
display: block;
}
Add it to your style.css file
edit
Note that will change it for every code tag on the site, so in case you don't want to do that you can either add it inline to that particular code tag (which isn't really the best idea):
<code style="display:block;"></code>
Or create a class for it:
code.code-block {
display: block;
}
<code class="code-block"></code>