Class for nested languages correct?

rauschma commented 8 months ago

I’m getting (e.g.):

properties: { className: [ 'javascript' ] },

But Highlight.js uses language-javascript

wooorm commented 8 months ago

where, how?

rauschma commented 8 months ago

Example “HTML, XML” at https://highlightjs.org/examples – search for “language-javascript”:

<pre class="theme-atom-one-dark shadow-3xl text-sm relative overflow-hidden max-w-full h-[400px] mb-6"><span class="hljs mb-0 p-4 block min-h-full overflow-auto"><code><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Title<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"><span class="hljs-selector-tag">body</span> {<span class="hljs-attribute">width</span>: <span class="hljs-number">500px</span>;}</span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"application/javascript"</span>&gt;</span><span class="language-javascript">
  <span class="hljs-keyword">function</span> <span class="hljs-title function_">$init</span>(<span class="hljs-params"></span>) {<span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;}
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">checked</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">'title'</span>&gt;</span>Title<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
  <span class="hljs-comment">&lt;!-- here goes the rest of the page --&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span></code></span><small class="bg-black/30 absolute top-0 right-0 uppercase font-bold text-xs rounded-bl-md px-2 py-1"><span class="sr-only">Language:</span>HTML, XML</small></pre>

wooorm commented 8 months ago

Right that’s highlightjs but how are you using lowlight and where are you getting javascript?

Can you post actual input and actual output and expected output?

rauschma commented 8 months ago

const sourceCodeHtml = outdent`
  <!DOCTYPE html>
  <title>Title</title>

  <style>body {width: 500px;}</style>

  <script>
    function $init() {return true;}
  </script>

  <body>
    <p checked class="title" id='title'>Title</p>
    <!-- here goes the rest of the page -->
  </body>
`;

function logHastTree() {
  const lowlight = createLowlight(common);
  const tree = lowlight.highlight('html', sourceCodeHtml);
  console.dir(tree, { depth: undefined });
}

Nested inside the output:

    {
      type: 'element',
      tagName: 'span',
      properties: { className: [ 'javascript' ] },

It’s not a problem for me but I thought that you might want to know about the difference.

wooorm commented 8 months ago

I dunno. Maybe related to https://github.com/wooorm/lowlight/blob/c5dc24bfb4e082781dd1582920ee7ef415901d39/lib/index.js#L449-L454. I’d assume they’d pass it. I don’t know when hljs chooses to prefix things with language-.

wooorm commented 8 months ago

oh, might be https://github.com/wooorm/lowlight/blob/c5dc24bfb4e082781dd1582920ee7ef415901d39/lib/index.js#L433

rauschma commented 8 months ago

Right! It has to be about .__addSublanguage(). I don’t know which approach better fits your needs (with or without the prefix “language-”).

wooorm commented 8 months ago

I don’t really have opinions about what value is “correct”; a prefix might be nice; matching hljs is probably nice too.

wooorm / lowlight

Class for nested languages correct? #56