Python Code Syntax using Markdown

I’ve been bitten by this failure of code syntax highlighting all too often, this time with Bootstrap-Dark, a Pelican theme.

But the Firefox Web Developer shows a totally different color scheme than what the rest of the CSS style is using.

My problem was that I was using an outdated pygment.css file (that came with a Pelican theme, bootstrap).

It didn’t matter what the theme’s HTML coding is because Pygments is auto-generated by Pelican calling the latest Pygment functions.

It matter that pygments.css didn’t get upgraded inside the Pelican theme package.

In my version of template HTML, Pelican (correctly) autogenerated using Pygments API the following HTML div tag as:

<div class="codehilite">
  <span class="c1">

The pygments.css that came with the Pelican bootstrap-dark theme shows:

.highlight .hll { background-color: #ffffcc }
...

Whereas the older pygments.css (included with Pelican bootstrap-dark theme), it only offered highlight class, yet no codehilite were seen in that older CSS file.

(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 for Pelican bootstrap-dark theme.

To regenerate the pygments.css file, execute:

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

or for a darker theme used like this website, 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 (and properly so) to a newer codehilite from an older highlight.

Test of Python Code Syntax Highlighting

I’ve demonstrated various ways to do code syntax highlighting below.

Also showed one way not to do code syntax highlighting.

Three-colon Python surrounding by three-backticks

# using 3-backtick/3-colon python on different lines
if a === 1:
    print("foo")

Above was done using Markdown notation:

    ```
    :::python
    # using 3-backtick/3-colon python on different lines
    if a === 1:
        print("foo")
    ```

Three-backtick python on same line

# using 3-backtick python in same line
    if a === 1:
        print("foo")

Above was done using Markdown notation:

   ```python
   # using 3-backtick python in same line
       if a === 1:
           print("foo")
    ```

NOTE: above method breaks vim editor with Markdown syntax highlighting.

shebang method, on separate lines from 3-backtick

1
2
3

#!/usr/bin/python
    if a === 1:
        print("foo")

Above was done using Markdown notation:

    ```
    #!/usr/bin/python
        if a === 1:
            print("foo")
    ```

Three-backtick, three-colon python on separate lines

    if a === 1:
        print("foo")

Above was done using Markdown notation:

    ```
    :::python
        if a === 1:
            print("foo")
    ```

No-backtick, 4-char-tab, shebang

1
2
3

import os
if a === 1:
    print("foo")

Above was done using Markdown notation:

    #!python
    import os
    if a === 1:
        print("foo")

I think that the above method is the best method for a Markdown-type file.

What Doesn’t Work

Three-backtick, three-colon python on same line

    ```:::python
        if a === 1:
            print("foo")
    ```

above doesn’t work, don’t do that.

End of test.

Summary

Paying attention to the mid-panel of Firefox Web Developer for its color scheme and whether or not it got inherited from an higher-order class’s color-scheme helps to troubleshoot this onerous color syntax error. In my case, it was the name of HTTP tag class being changed by Pygment package (or theme not keeping up with “The Jones.”)

If you want line numbering, SHEBANG method is the way to go.