CODEWITHSUNDEEP
pythonmarkdownpygmentspelican
tomriddle_1234
tomriddle_1234

Reputation: 3213

How to change default markdown's inline highlight style?

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:

  1. Inline code syntax highlighting in GitHub markdown?
  2. Inline code highlighting in reStructuredText

Upvotes: 0

Views: 4250

Answers (2)

John Greene
John Greene

Reputation: 2596

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.

Upvotes: 1

Waylan
Waylan

Reputation: 42497

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):

  1. 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.

  2. 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.

  3. 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.

Upvotes: 1

Related Questions