Fix to use underscore suffixes for subscopes

Closes GH-43.

Author: wooorm

lib/core.js

@@ -264,7 +264,12 @@ class HastEmitter {
    * @param {string} name
    */
   openNode(name) {
-    const className = name.split('.').map((d) => this.options.classPrefix + d)
+    // 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((d, i) => (i ? d + '_'.repeat(i) : this.options.classPrefix + d))
     const current = this.stack[this.stack.length - 1]
     /** @type {Span} */
     const child = {

test/fixture/js-class/output.txt

@@ -1,11 +1,11 @@
-<span class="hljs-keyword">class</span> <span class="hljs-title hljs-class">Car</span> <span class="hljs-keyword">extends</span> <span class="hljs-title hljs-class hljs-inherited">Vehicle</span> {
-  <span class="hljs-title hljs-function">constructor</span>(<span class="hljs-params">speed, cost</span>) {
-    <span class="hljs-variable hljs-language">super</span>(speed);
+<span class="hljs-keyword">class</span> <span class="hljs-title class_">Car</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">Vehicle</span> {
+  <span class="hljs-title function_">constructor</span>(<span class="hljs-params">speed, cost</span>) {
+    <span class="hljs-variable language_">super</span>(speed);
 
-    <span class="hljs-keyword">var</span> c = <span class="hljs-title hljs-class">Symbol</span>(<span class="hljs-string">'cost'</span>);
-    <span class="hljs-variable hljs-language">this</span>[c] = cost;
+    <span class="hljs-keyword">var</span> c = <span class="hljs-title class_">Symbol</span>(<span class="hljs-string">'cost'</span>);
+    <span class="hljs-variable language_">this</span>[c] = cost;
 
-    <span class="hljs-variable hljs-language">this</span>.<span class="hljs-property">intro</span> = <span class="hljs-string">`This is a car runs at
+    <span class="hljs-variable language_">this</span>.<span class="hljs-property">intro</span> = <span class="hljs-string">`This is a car runs at
       <span class="hljs-subst">${speed}</span>.`</span>;
   }
 }

test/fixture/js-default-parameters/output.txt

@@ -1,4 +1,4 @@
-<span class="hljs-keyword">function</span> <span class="hljs-title hljs-function">visibleTodoFilter</span>(<span class="hljs-params">state = <span class="hljs-string">'watch'</span>, action</span>) {
+<span class="hljs-keyword">function</span> <span class="hljs-title function_">visibleTodoFilter</span>(<span class="hljs-params">state = <span class="hljs-string">'watch'</span>, action</span>) {
   <span class="hljs-keyword">switch</span> (action.<span class="hljs-property">type</span>) {
   <span class="hljs-keyword">case</span> <span class="hljs-string">'CHANGE_VISIBLE_FILTER'</span>:
     <span class="hljs-keyword">return</span> action.<span class="hljs-property">filter</span>;
@@ -7,7 +7,7 @@
   }
 }
 
-<span class="hljs-keyword">function</span> <span class="hljs-title hljs-function">todos</span>(<span class="hljs-params">state, action</span>) {
+<span class="hljs-keyword">function</span> <span class="hljs-title function_">todos</span>(<span class="hljs-params">state, action</span>) {
   <span class="hljs-keyword">switch</span> (action.<span class="hljs-property">type</span>) {
   <span class="hljs-keyword">case</span> <span class="hljs-string">'ADD_TODO'</span>:
     <span class="hljs-keyword">return</span> [...state, {
@@ -16,17 +16,17 @@
     }];
   <span class="hljs-keyword">case</span> <span class="hljs-string">'COMPLETE_TODO'</span>:
     <span class="hljs-keyword">return</span> [
-      ...state.<span class="hljs-title hljs-function">slice</span>(<span class="hljs-number">0</span>, action.<span class="hljs-property">index</span>),
-      <span class="hljs-title hljs-class">Object</span>.<span class="hljs-title hljs-function">assign</span>({}, state[action.<span class="hljs-property">index</span>], {
+      ...state.<span class="hljs-title function_">slice</span>(<span class="hljs-number">0</span>, action.<span class="hljs-property">index</span>),
+      <span class="hljs-title class_">Object</span>.<span class="hljs-title function_">assign</span>({}, state[action.<span class="hljs-property">index</span>], {
         <span class="hljs-attr">completed</span>: <span class="hljs-literal">true</span>
       }),
-      ...state.<span class="hljs-title hljs-function">slice</span>(action.<span class="hljs-property">index</span> + <span class="hljs-number">1</span>)
+      ...state.<span class="hljs-title function_">slice</span>(action.<span class="hljs-property">index</span> + <span class="hljs-number">1</span>)
     ]
   <span class="hljs-attr">default</span>:
     <span class="hljs-keyword">return</span> state;
   }
 }
 
 <span class="hljs-keyword">import</span> { combineReducers, createStore } <span class="hljs-keyword">from</span> <span class="hljs-string">'redux'</span>;
-<span class="hljs-keyword">let</span> reducer = <span class="hljs-title hljs-function">combineReducers</span>({ visibleTodoFilter, todos });
-<span class="hljs-keyword">let</span> store = <span class="hljs-title hljs-function">createStore</span>(reducer);
+<span class="hljs-keyword">let</span> reducer = <span class="hljs-title function_">combineReducers</span>({ visibleTodoFilter, todos });
+<span class="hljs-keyword">let</span> store = <span class="hljs-title function_">createStore</span>(reducer);

test/fixture/js-keywords/output.txt

@@ -1,13 +1,13 @@
-<span class="hljs-keyword">function</span> <span class="hljs-title hljs-function">$initHighlight</span>(<span class="hljs-params">block, cls</span>) {
+<span class="hljs-keyword">function</span> <span class="hljs-title function_">$initHighlight</span>(<span class="hljs-params">block, cls</span>) {
   <span class="hljs-keyword">try</span> {
-    <span class="hljs-keyword">if</span> (cls.<span class="hljs-title hljs-function">search</span>(<span class="hljs-regexp">/\bno\-highlight\b/</span>) != -<span class="hljs-number">1</span>)
-      <span class="hljs-keyword">return</span> <span class="hljs-title hljs-function">process</span>(block, <span class="hljs-literal">true</span>, <span class="hljs-number">0x0F</span>) +
+    <span class="hljs-keyword">if</span> (cls.<span class="hljs-title function_">search</span>(<span class="hljs-regexp">/\bno\-highlight\b/</span>) != -<span class="hljs-number">1</span>)
+      <span class="hljs-keyword">return</span> <span class="hljs-title function_">process</span>(block, <span class="hljs-literal">true</span>, <span class="hljs-number">0x0F</span>) +
              <span class="hljs-string">' class=""'</span>;
   } <span class="hljs-keyword">catch</span> (e) {
     <span class="hljs-comment">/* handle exception */</span>
   }
   <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span> / <span class="hljs-number">2</span>; i &lt; classes.<span class="hljs-property">length</span>; i++) {
-    <span class="hljs-keyword">if</span> (<span class="hljs-title hljs-function">checkCondition</span>(classes[i]) === <span class="hljs-literal">undefined</span>)
+    <span class="hljs-keyword">if</span> (<span class="hljs-title function_">checkCondition</span>(classes[i]) === <span class="hljs-literal">undefined</span>)
       <span class="hljs-keyword">return</span> <span class="hljs-regexp">/\d+[\s/]/g</span>;
   }
 }

test/fixture/js-modules/output.txt

@@ -1,8 +1,8 @@
 <span class="hljs-comment">//------ underscore.js ------</span>
 <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">function</span> (<span class="hljs-params">obj</span>) {};
-<span class="hljs-keyword">export</span> <span class="hljs-keyword">function</span> <span class="hljs-title hljs-function">each</span>(<span class="hljs-params">obj, iterator, context</span>) {};
+<span class="hljs-keyword">export</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">each</span>(<span class="hljs-params">obj, iterator, context</span>) {};
 <span class="hljs-keyword">export</span> { each <span class="hljs-keyword">as</span> forEach };
-<span class="hljs-keyword">export</span> <span class="hljs-keyword">function</span> <span class="hljs-title hljs-function">something</span>(<span class="hljs-params"></span>) {};
+<span class="hljs-keyword">export</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">something</span>(<span class="hljs-params"></span>) {};
 
 <span class="hljs-comment">//------ main.js ------</span>
 <span class="hljs-keyword">import</span> _, { each, something <span class="hljs-keyword">as</span> otherthing } <span class="hljs-keyword">from</span> <span class="hljs-string">'underscore'</span>;

test/fixture/ruby-heredoc/output.txt

@@ -1,12 +1,12 @@
-<span class="hljs-keyword">def</span> <span class="hljs-title hljs-function">foo</span>()
+<span class="hljs-keyword">def</span> <span class="hljs-title function_">foo</span>()
   msg = <span class="hljs-string">&lt;&lt;-HTML
   &lt;div>
     &lt;h4><span class="hljs-subst">#{bar}</span>&lt;/h4>
   &lt;/div>
   HTML</span>
 <span class="hljs-keyword">end</span>
 
-<span class="hljs-keyword">def</span> <span class="hljs-title hljs-function">baz</span>()
+<span class="hljs-keyword">def</span> <span class="hljs-title function_">baz</span>()
   msg = <span class="hljs-string">&lt;&lt;~FOO
   &lt;div>
     &lt;h4><span class="hljs-subst">#{bar}</span>&lt;/h4>

test/fixture/rust-traits/output.txt

@@ -1,3 +1,3 @@
-<span class="hljs-keyword">fn</span> <span class="hljs-title hljs-function">sqr</span>(i: <span class="hljs-type">i32</span>) { i * i }
-<span class="hljs-keyword">trait</span> <span class="hljs-title hljs-class">Minimum</span> : <span class="hljs-built_in">Copy</span> {}
-<span class="hljs-keyword">pub</span> <span class="hljs-keyword">trait</span> <span class="hljs-title hljs-class">Builder</span> <span class="hljs-keyword">where</span> <span class="hljs-keyword">Self</span>: <span class="hljs-built_in">Sized</span> + <span class="hljs-built_in">Iterator</span>&lt;Item=Event> {}
+<span class="hljs-keyword">fn</span> <span class="hljs-title function_">sqr</span>(i: <span class="hljs-type">i32</span>) { i * i }
+<span class="hljs-keyword">trait</span> <span class="hljs-title class_">Minimum</span> : <span class="hljs-built_in">Copy</span> {}
+<span class="hljs-keyword">pub</span> <span class="hljs-keyword">trait</span> <span class="hljs-title class_">Builder</span> <span class="hljs-keyword">where</span> <span class="hljs-keyword">Self</span>: <span class="hljs-built_in">Sized</span> + <span class="hljs-built_in">Iterator</span>&lt;Item=Event> {}

test/fixture/swift-functions/output.txt

@@ -1,10 +1,10 @@
-<span class="hljs-keyword">protocol</span> <span class="hljs-title hljs-class">Protocol</span> {
-  <span class="hljs-keyword">func</span> <span class="hljs-title hljs-function">f1</span>()
-  <span class="hljs-keyword">func</span> <span class="hljs-title hljs-function">f2</span>()
+<span class="hljs-keyword">protocol</span> <span class="hljs-title class_">Protocol</span> {
+  <span class="hljs-keyword">func</span> <span class="hljs-title function_">f1</span>()
+  <span class="hljs-keyword">func</span> <span class="hljs-title function_">f2</span>()
 }
 
-<span class="hljs-keyword">class</span> <span class="hljs-title hljs-class">MyClass</span> {
-  <span class="hljs-keyword">func</span> <span class="hljs-title hljs-function">f</span>() {
+<span class="hljs-keyword">class</span> <span class="hljs-title class_">MyClass</span> {
+  <span class="hljs-keyword">func</span> <span class="hljs-title function_">f</span>() {
     <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>
   }
 }

test/index.js

@@ -107,7 +107,7 @@ test('lowlight.highlight(language, value[, options])', (t) => {
         {
           type: 'element',
           tagName: 'span',
-          properties: {className: ['hljs-title', 'hljs-function']},
+          properties: {className: ['hljs-title', 'function_']},
           children: [{type: 'text', value: 'moveTo'}]
         },
         {