Change dev hljs version (#99)

Author: tsutsu3

.github/workflows/ci.yml

@@ -22,7 +22,7 @@ jobs:
           node-version: ${{ matrix.node-version }}
       - run: npm ci
       - run: npm run build --if-present
-      - run: npm test
+      - run: npm run test:all
       - name: Upload coverage reports to Codecov
         if: matrix.node-version == '20.x' && github.repository == 'tsutsu3/markdown-it-named-code-blocks'
         uses: codecov/codecov-action@v4

README.md

@@ -46,14 +46,38 @@ npm install markdown-it-named-code-blocks
 Use this same as a normal markdown-it plugin:
 
 ```js
-const md = require('markdown-it');
-const namedCodeBlocks = require('markdown-it-named-code-blocks');
+const md = require("markdown-it");
+const hljs = require("highlight.js");
+const namedCodeBlocks = require(".");
+
+const parser = md({
+  highlight: function (str, lang) {
+    if (lang && hljs.getLanguage(lang)) {
+      return (
+        '<pre class="hljs"><code>' +
+        hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
+        "</code></pre>"
+      );
+    }
+
+    return (
+      '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + "</code></pre>"
+    );
+  }
+}).use(namedCodeBlocks);
+
+const str = '```js:hello.js\nconsole.log("Hello World!");\n```';
 
-const parser = md().use(namedCodeBlocks);
+const result = parser.render(str);
+
+console.log(result);
+```
 
-const str = '```js:hello.js\nconsole.log("Hello World!);```'
+Output:
 
-const result = parser.render(str);
+```html
+<pre class="hljs named-fence-block"><code><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;Hello World!&quot;</span>);
+</code><div class="named-fence-filename">hello.js</div></pre>
 ```
 
 Apply CSS like this:
@@ -86,9 +110,11 @@ If you want to enable inline CSS:
 const parser = md().use(namedCodeBlocks, {isEnableInlineCss: true});
 ```
 
+Output:
+
 ```html
-<pre class="hljs named-fence-block" style="position: relative; padding-top: 2em"><code>console.log(&quot;Hello World!&quot;)
-</code><div class="mincb-name" style="position: absolute; top: 0; left: 0; padding: 0 4px; font-weight: bold; color: #000000; background: #c0c0c0; opacity: .6;">hello.js</div></pre>
+<pre class="hljs named-fence-block" style="position: relative; padding-top: 2em;"><code><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;Hello World!&quot;</span>);
+</code><div class="named-fence-filename" style="position: absolute; top: 0; left: 0; padding: 0 4px; font-weight: bold; color: #000000; background: #c0c0c0; opacity: .6;">hello.js</div></pre>
 ```
 
 ## 🎉 License

image/named_code_blocks.png

@@ -7,6 +7,11 @@
   "scripts": {
     "lint": "eslint . --ext .ts",
     "format": "prettier --write \"**/*.ts\"",
+    "install-hljs10": "npm install highlight.js@^10.7.3 --no-save",
+    "install-hljs11": "npm install highlight.js@^11.0.0 --no-save",
+    "test-hljs10": "npm run install-hljs10 && jest --coverage",
+    "test-hljs11": "npm run install-hljs11 && jest --coverage",
+    "test:all": "npm run test-hljs10 && npm run test-hljs11",
     "test": "jest --coverage",
     "build": "tsc && npm run minify",
     "minify": "terser dist/index.js -o dist/index.min.js --compress --mangle",
@@ -39,7 +44,7 @@
     "@typescript-eslint/parser": "^8.13.0",
     "eslint": "^9.14.0",
     "eslint-config-prettier": "^9.1.0",
-    "highlight.js": "^10.7.3",
+    "highlight.js": "^11.10.0",
     "jest": "^29.7.0",
     "markdown-it": "^14.0.0",
     "markdown-it-testgen": "^0.1.6",

package-lock.json

@@ -0,0 +1,99 @@
+none
+.
+```
+console.log("Hello World!");
+```
+.
+<pre><code>console.log(&quot;Hello World!&quot;);
+</code></pre>
+.
+
+js
+.
+```js
+console.log("Hello World!");
+```
+.
+<pre><code class="language-js">console.log(&quot;Hello World!&quot;);
+</code></pre>
+.
+
+js:
+.
+```js:
+console.log("Hello World!");
+```
+.
+<pre><code class="language-js">console.log(&quot;Hello World!&quot;);
+</code></pre>
+.
+
+js:hello.js (named code blocks)
+.
+```js:hello.js
+console.log("Hello World!");
+```
+.
+<pre class="named-fence-block"><code class="language-js">console.log(&quot;Hello World!&quot;);
+</code><div class="named-fence-filename">hello.js</div></pre>
+.
+
+:hello.js
+.
+```:hello.js
+console.log("Hello World!");
+```
+.
+<pre><code>console.log(&quot;Hello World!&quot;);
+</code></pre>
+.
+
+hello.js
+.
+```hello.js
+console.log("Hello World!");
+```
+.
+<pre><code class="language-hello.js">console.log(&quot;Hello World!&quot;);
+</code></pre>
+.
+
+js:hello.js:second.js
+.
+```js:hello.js:second.js
+console.log("Hello World!");
+```
+.
+<pre><code>console.log(&quot;Hello World!&quot;);
+</code></pre>
+.
+
+hello.js:second.js (named code blocks, but language is incorrect)
+.
+```hello.js:second.js
+console.log("Hello World!");
+```
+.
+<pre class="named-fence-block"><code class="language-hello.js">console.log(&quot;Hello World!&quot;);
+</code><div class="named-fence-filename">second.js</div></pre>
+.
+
+js langAttr
+.
+```js langAttr
+console.log("Hello World!");
+```
+.
+<pre><code class="language-js">console.log(&quot;Hello World!&quot;);
+</code></pre>
+.
+
+js:hello.js langAttr
+.
+```js:hello.js langAttr
+console.log("Hello World!");
+```
+.
+<pre class="named-fence-block"><code class="language-js">console.log(&quot;Hello World!&quot;);
+</code><div class="named-fence-filename">hello.js</div></pre>
+.