marp-team / marp-core

The core of Marp converter
MIT License
797 stars 132 forks source link

Normal code strings don't get highlighted correctly #376

Open mil-ad opened 5 months ago

mil-ad commented 5 months ago

I've just restarted using marp after a while. After upgrading all all my marp packages I noticed a problem in the the syntax highlithing that I didn't have before.

Example slide:

image

The problem is that the normal strings in the code block are not picking up the color defined in my css. I think the problem is the normal strings do not get assigned any classes and are not wrapped in <span>. here's the generated HTML:

<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-python"><span class="hljs-keyword">from</span> functools <span class="hljs-keyword">import</span> cache

<span class="hljs-meta">@cache</span>
<span class="hljs-keyword">def</span> <span class="hljs-title function_">fibonacci</span>(<span class="hljs-params">n</span>):
    <span class="hljs-keyword">if</span> n == <span class="hljs-number">0</span>: 
        <span class="hljs-keyword">return</span> <span class="hljs-number">0</span>
    <span class="hljs-keyword">elif</span> n == <span class="hljs-number">1</span>: 
        <span class="hljs-keyword">return</span> <span class="hljs-number">1</span>
    <span class="hljs-keyword">else</span>: 
        <span class="hljs-keyword">return</span> fibonacci(n-<span class="hljs-number">1</span>) + fibonacci(n-<span class="hljs-number">2</span>)
</code></pre>

you can see that functools for instance is not part of any class? I was expecting it to be part hljs class?

yhatt commented 5 months ago

It seems that highlight.js does not yet support detailed highlighting for some Python keywords. Many similar issues about Python code highlighting are hanging from highlightjs/highlight.js#2500.

You also can test the current tokenization of highlight.js on https://highlightjs.org/demo. Actually we can see functools is not part of any class by inspecting DOM.

If you were customized the theme from Marp Core theme, the default text color of not highlighted keywords in the code block will become black whenever invert class is not assigned to the slide page. To set your own default color in you style, set color CSS declaration to <code> or <pre>:

<style>
code {
  color: white;
}
</style>