I cannot get syntax highlighting to work on my Jekyll-powered blog.
The development files can be found here: https://github.com/StevenXL/stevenxl.github.io.
As you can see, in my _config.yml file, I have the following:
markdown: kramdown
kramdown:
syntax_highlighter: rouge
In my css/custom.css file, I am importing the CSS file to highlight the syntax with an #import command.
The actual CSS file for highlighting lives in css/monokai.css.
I am not sure what I am doing wrong. This seems to work fine on my local preview when I run jekyll serve but not when I push the development files to GitHub.It doesn't seem to be adding the correct classes when built by GitHub.
I had the same issue using the monokai highlighting css from the jekyll-uno theme.
To solve the problem I had to update the CSS, using rouge itself is quite straightforward (taken from the docs):
rougify style monokai > css/monokai.css
There are other themes available, too.
For me this seemed to be a casing issue for my language hints.
Did not work:
``` SQL
Worked:
``` sql
You must use the Jekyll highlight tag
{% highlight ruby %}
def foo
puts 'foo'
end
{% endhighlight %}
Related
Issue
CSS styling is not displaying in the the VS Code preview for Markdown files despite being configured under the Workspace Settings per the VS Code documentation Extending the Markdown preview.
Expected
Here is how the published Markdown file media.md displays when being hosted.
Note: Green border added to highlight Markdown code.
Result
Here is how the Markdown file media.md displays in the VS Code preview.
Note: Green border added to highlight Markdown code.
Setup
Workspace Structure
The Markdown file attempting to be styled with assets/css/style.scss is media.md.
Workspace Settings
This is configured under Workspace Settings as opposed to User Settings.
{
"markdown.styles": [
"assets/css/style.scss"
]
}
It looks like the "markdown.styles": [] setting of VSC is particularly for CSS, not SCSS.
You can use Sass to process your *.scss into *.css files that the VSC Markdown preview will be able to understand.
From the looks of it, though, it seems you're working on a Jekyll site (I see a _config.yml Jekyll configuration file). In that case, serving your Jekyll site locally to preview changes may be a better option.
P.S. it would be easier to parse your question if the Markdown screenshots had a border around them to better differentiate between them and the details of the question itself :)
I'm building documentation for my API library and I'm having readthedocs.io host the documentation, and is backed with Sphinx. I have the Read The Docs theme installed for Sphinx using pip install, and the Read the Docs website currently has the documentation running.
I would like to change the colors of my documentation. I have done some searching through their GitHub repository GitHub.com and have seen some talk that editing the sass files. However, I can't seem to find where these files are located.
I believe the canonical way is to create a _static folder, include CSS files in that, and then reference that CSS in your templates with an include in the _templates folder.
To demonstrate this, you can try a simple override of the layout.html file: first, create _templates in your docs folder if it doesn't already exist, then create a file there named layout.html.
Populate that with the following:
{% extends "!layout.html" %}
{% block footer %} {{ super() }}
<style>
/* Sidebar header (and topbar for mobile) */
.wy-side-nav-search, .wy-nav-top {
background: #00ff00;
}
/* Sidebar */
.wy-nav-side {
background: #ff0000;
}
</style>
{% endblock %}
Once you've rebuilt your docs, you should see a garish side-bar and header. (I used a similar technique with our Sphinx / Read The Docs theme implementation. View source etc. to see which bits we override.)
You can change the theme colors by adding a custom CSS file to _static. To actually have Sphinx use that file, add this to your conf.py:
def setup(app):
app.add_css_file('custom.css')
Sample CSS (custom.css) to change the sidebar color to dark-green (based on #afit's answer):
.wy-side-nav-search, .wy-nav-top {
background: #0b750a;
}
An easier way to add CSS files is to set html_css_files in your conf.py:
# custom.css is inside one of the html_static_path folders (e.g. _static)
html_css_files = ["custom.css"]
See: https://docs.readthedocs.io/en/latest/guides/adding-custom-css.html
If you only want to change the color of the navigation header, you can do that by using the html_theme_options variable in conf.py. There is parameter called 'style_nav_header_background'.
https://sphinx-rtd-theme.readthedocs.io/en/stable/configuring.html#theme-options
I am using React and I really like the fact to I can write inline style directly in my javascript file. However, autocomplete css doesn't seems to work in Atom editor.It work fine with ".css" file, not in ".js" file. Is there an Atom package that would enable this feature? thank you
The scope in which snippets are working is defined in the snippet file itself. There is currently no way to make snippets work in a “foreign” scope (see this forum post for reference.)
Your best option is probably adding the language-css snippets to your Atom snippets (Atom > Snippets) and edit their scope accordingly (e.g. source.css, source.js). Alternatively, you could do the same creating a new package.
I use the lesscss, it's works fine, but the Eclipse editor doesn't highlight the words, and the Zen Coding doesn't recognize that a css file. How can I open the .less file as a .css file?
Any help would be appreciated.
I found the solution: in the general menu -> content types option I can add a file association to the css content type.
This is my first time to use Jekyll and Pygments. But I don't know how to insert colorful code snippet.
I successfully installed Pygments, following the official steps, with the markdown like this:
{% highlight ruby %}
def foo
puts 'foo'
end
{% endhighlight %}
I see the html source code including the classes, however there is no color for the this snippet.
Do I need to generate some css files from Pygments and include them? And how?
Yes, you need to either install or create CSS classes to make the code highlighting work Pygments does visible. After installing Pygments, this can be done by running the following from the command line:
pygmentize -S default -f html > pygments.css
This will create a pygments.css file with the default in your current directory; pygments -L style will list all available styles.
You can either move this into your HTML tree and call it with a corresponding:
<link rel="stylesheet" type="text/css" href="/path/to/pygments.css">
Or, copy the contents of pygments.css and place it in an existing style sheet. That will get you started. You can edit the CSS from there to customize as appropriate.
Two notes:
You've probably already done this, but for the benefit of people who are new to Jekyll and Pygments, you'll probably also have to add pygments: true to your _config.yml file to get Pygments working. (Or, run jekyll with jekyll --pygments which has the same effect.)
The original Jekyll installation documentation wasn't very clear about how to get Pygments working when this question was asked. I added 'Pygments Usage' section since then to hopefully help clear things up there as well.
You need to include syntax.css
You can take the sample from my repo
https://github.com/madhur/madhur.github.com/blob/master/files/css/syntax.css
and then customize it according to your theme. Mine is customized for dark backgrounds.