How to change default markdown's inline highlight style?

Question

I'm using pelican in Python to generate the static pages. It is fine to use markdown with Pygment to highlight a code block, however when it comes to the inline highlight, there is a significant difference.

Please check my page. The page is in a dark background, but the inline highlight with the back ticks `` are white background.

The markdown code is

To clearify what exactly the command returns, 
one can use `pack('>i', -2500).encode('hex')`{.python}. 
Or I have a more complex solution like, `''.join(r'\x%02X' 
% ord(ch) for ch in src)`{.python}.

So the question here is how to define the inline highlight style?

I tried to altered the pygments default.css file in the pelican theme, but it didn't work.

I found some related links:

score 1 · Answer 1 · answered Dec 29 '14 at 15:57

Pelican uses Python-Markdown with the CodeHilite Extension to pass code blocks to Pygments. Note that code blocks do not include inline code snippets. In fact I am not aware of any Markdown parser which supports highlighting inline code. Generally, inline code snippets are too short to effectively highlight and almost always too short to take advantage of Pygments' language guessing algorithm.

I see you have attempted to inform Markdown of the language using the Attribute List Extension. However, all that does is add a class to the HTML <code> tag that wraps the code snippet. As the CodeHilite Extension only works on blocks, it never even looks at it, and certainly never passes it to Pygments.

There are a few different options you have available (each increasing in the amount of work required):

You can write your own CSS which changes the background and text color so that they match the blocks. You won't get syntax highlighting, but the inline code snippets will at least match your theme. No need to define the language here.
You could use a JavaScript code highlighting library to highlight all the code snippets based on the language you define with the Attribute List Extension. However, this may require you to redefine the CSS for the JS library so it matches the output of Pygments.
You could write your own Python-Markdown extension (or perhaps fork CodeHilite) which also highlights inline code snippets in addition to blocks.

Personally, I would recommend (1) above. In fact, looking at your page, is appears that the code blocks have the following defined:

.highlight pre, .highlighttable pre {
    background: #272822;
    color: #f8f8f2;
}

That is, a <pre> element with a parent assigned the "highlight" class (or the "highlighttable" class) will be displayed with those colors. As you want the same colors assigned to inline code, add the following rule:

code {
    background: #272822;
    color: #f8f8f2;
}

Just be sure that you define that after the styles defined by the Pelican theme (which appears to be in http://vfxware.com/theme/css/bootstrap.slate.min.css).

Sure, you could alter the existing CSS, but then if you later decide to update to a newer version of the theme or change themes entirely, you might have to redefine your own rules. Therefore, I like to define my own set of overrides in a separate file which I always make sure is the last one loaded.

From my question's link http://stackoverflow.com/questions/10870719/inline-code-highlighting-in-rest, it looks like can do inline highlight, so you mean the normal markdown doesn't support this? — tomriddle_1234, Dec 30 '14 at 07:26
@tomriddle_1234 yes, that is correct. This is not a typical feature of Markdown. I was not aware of any Markdown implementations which supported this until you linked to one. My guess is that that implementation is the only one that does support the feature. And I questions its ability to get things right all the time for the reasons stated in my answer. — Waylan, Jan 13 '15 at 01:46

score 1 · Answer 2 · answered Nov 17 '18 at 18:31

I've been bitten by this all too often. My problem was that I was using an older template's old pygment.css file while upgrading the Pygment modules (CSS didn't catch up with the Pygment plugin.

In my case, the older Pygment CSS was using an HTML tag class highlight when it should be using the newer codehilite class name that newer Pygment code is now using. (Thanks to Firefox->Windows->Web Developer->Toggle menu option for pointing out this "breakage".

Replacing the pygments.css CSS-style file does the trick in restoring this much needed code syntax highlighting capability.

To regenerate the pygments.css file, execute:

pygmentize -S default -f html -a .codehilite > pygments.css

or for a darker theme, use Pygmentize monokai style, as listed in pygmentize -L:

pygmentize -S monokai -f html -a .codehilite > pygments.css

Again, problem was that Pygments changed its HTTP tag class to a newer codehilite from an older highlight.

How to change default markdown's inline highlight style?

2 Answers2