`pymdownx.highlight` --- where do I find the "highlight" stylesheet used by syntax highlighting on fenced blocks?

Question

I've been trying to write a Flask app which automatically converts Markdown into an HTML that will get served as the response.

Consider the following toy snippet:

import markdown
md = markdown.Markdown(extensions=['pymdownx.superfences'])

s = '''
```py3
import hello_world
\```  # ignore the backslash here
'''.strip()

print(md.convert(s))

And it produces the following output:

<div class="highlight"><pre><span></span><code><span class="kn">import</span> <span class="nn">hello_world</span>
</code></pre></div>

Notice the class="highlight" there in the div. My produced HTML has no syntax highlighting, obviously---because I don't have a stylesheet that defines that "highlight" class. But for the life of me, I can't figure out what I'm supposed to do with pymdownx in order to find that stylesheet with highlight. Is there a property or function I need to access? Is there something separate that I need to include in the CSS on my own?

I'm pretty lost, so any help would be appreciated.

Answer 1

The highlight class is included so that the block can be targeted by JavaScript code formatters such as highlight.js. The actual highlighting here is in the span classes that appear in your generated output, like kn and nn. You can generate a stylesheet for this with Pygments like so:

pygmentize -S default -f html > desired/path/to/stylesheet.css

Which includes (among others) the rules:

.kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
.nn { color: #0000FF; font-weight: bold } /* Name.Namespace */

List of Pygments supported styles