Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Class for nested languages correct? #56

Open
rauschma opened this issue Jan 22, 2024 · 8 comments
Open

Class for nested languages correct? #56

rauschma opened this issue Jan 22, 2024 · 8 comments

Comments

@rauschma
Copy link

I’m getting (e.g.):

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

But Highlight.js uses language-javascript

@wooorm
Copy link
Owner

wooorm commented Jan 22, 2024

where, how?

@rauschma
Copy link
Author

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
Copy link
Owner

wooorm commented Jan 22, 2024

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
Copy link
Author

rauschma commented Jan 22, 2024

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
Copy link
Owner

wooorm commented Jan 22, 2024

I dunno. Maybe related to

lowlight/lib/index.js

Lines 449 to 454 in c5dc24b

// First “class” gets the prefix. Rest gets a repeated underscore suffix.
// See: <https://github.com/highlightjs/highlight.js/commit/51806aa>
// See: <https://github.com/wooorm/lowlight/issues/43>
const className = name.split('.').map(function (d, i) {
return i ? d + '_'.repeat(i) : self.options.classPrefix + d
})
. I’d assume they’d pass it. I don’t know when hljs chooses to prefix things with language-.

@wooorm
Copy link
Owner

wooorm commented Jan 22, 2024

oh, might be

properties: {className: [name]},

@rauschma
Copy link
Author

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

@wooorm
Copy link
Owner

wooorm commented Jan 22, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants