Highlight js applies classes but not styles

Question

It seems like highlight.js applies classes to my content, but not styles. I'm using React, TypeScript and markdown-it.

Here are my changes to package.json:

  "dependencies": {
    "highlight.js": "^9.12.0",
  "devDependencies": {
    "@types/highlight.js": "^9.12.3",

Here is my markdown file:

lua
for i = 1, iterations do
    product.writeln("Starting iteration " .. tostring(i))
    product.writeln("Will run for " .. tostring(duration) .. " msec")

    project:start()
    product.msleep(onoffdelay)

    project:enable_main_power(true)

    product.msleep(duration)

    project:enable_main_power(false)
    product.msleep(onoffdelay)
    project:stop()

    product.writeln("Delaying for " .. tostring(delay) .. " msec...")

    product.msleep(delay)
end

Here is what I think is the relevant part of the React component that renders the markdown in html. I'm not very good at Typescript so I set the type of the parameters to string for now. I don't know where to find the type definition for lang.

    .then(data => {
        const text = data as string;
        const converted = text.replace(/!\[([^[\]]+)\]\(([^()]+)\)/g, `![$1](${resourceFolder}$2)`);
        const hljs = require('highlight.js'); // https://highlightjs.org/
        const md = require('markdown-it')({
            html: true,
            /* tslint:disable */
            highlight: function (str: any, lang: any) {
                if (lang && hljs.getLanguage(lang)) {
                  try {
                    return hljs.highlight(lang, str).value;
                  } catch (__) {}
                }

                return ''; // use external default escaping
              }
            /* tslint:enable */
        });
        const content = md.render(converted);
        this.setState({
            html: content
        });
    });

Here is the rendered html:

<pre><code class="language-lua"><span class="hljs-keyword">for</span> i = <span class="hljs-number">1</span>, iterations <span class="hljs-keyword">do</span>
    product.writeln(<span class="hljs-string">"Starting iteration "</span> .. <span class="hljs-built_in">tostring</span>(i))
    product.writeln(<span class="hljs-string">"Will run for "</span> .. <span class="hljs-built_in">tostring</span>(duration) .. <span class="hljs-string">" msec"</span>)

    project:start()
    product.msleep(onoffdelay)

    project:enable_main_power(<span class="hljs-literal">true</span>)

    product.msleep(duration)

    project:enable_main_power(<span class="hljs-literal">false</span>)
    product.msleep(onoffdelay)
    project:stop()

    product.writeln(<span class="hljs-string">"Delaying for "</span> .. <span class="hljs-built_in">tostring</span>(delay) .. <span class="hljs-string">" msec..."</span>)

    product.msleep(delay)
<span class="hljs-keyword">end</span>
</code></pre>

The rendered html looks completely plain with no syntax highlighting.