sergioramos · shivjm · May 23, 2021 · May 23, 2021 · May 30, 2021
diff --git a/README.md b/README.md
@@ -90,6 +90,27 @@ Output:
 
 Take a look at our [fixtures](test/fixtures) and it's [outputs](test/outputs) to see more examples.
 
+### reusing highlighters
+
+To avoid initializing highlighter for every call:
+
+```js
+const createHighlighter = require("remark-prism/src/highlight");
+
+const highlighter = createHighlighter({});
+
+require('unified')()
+  .use(require('remark-parse'))
+  .use(require('remark-prism'), {
+    highlighter: highlighter,
+    /* options */
+  })
+  .use(require('remark-rehype'))
+  .use(require('rehype-format'))
+  .use(require('rehype-stringify'))
+  .process(file, (err, file) => console.log(String(file)));
+```
+
 ### `transformInlineCode`
 
 Add relevant class names to inline code snippets. For example when you use single backtick code examples.

diff --git a/src/index.js b/src/index.js
@@ -71,7 +71,12 @@ const parseLang = (str) => {
 };
 
 module.exports = (options = {}) => (tree) => {
-  const highlight = createHighlighter(options);
+  let { highlighter } = options;
+
+  if (highlighter === undefined) {
+    highlighter = createHighlighter(options);
+  }
+
   const { transformInlineCode = false } = options;
 
   return map(tree, (node) => {
@@ -104,7 +109,7 @@ module.exports = (options = {}) => (tree) => {
     const code = h(
       'code',
       { className: `language-${lang}` },
-      highlight({
+      highlighter({
         lang,
         value:
           value ||

diff --git a/test/index.js b/test/index.js
@@ -15,6 +15,7 @@ const vfile = require('to-vfile');
 const unified = require('unified');
 
 const prism = require('..');
+const createHighlighter = require('../src/highlight');
 const { PLUGINS } = require('../src/highlight');
 
 const { CI = 'false' } = process.env;
@@ -148,7 +149,15 @@ const compileHAst = async (testcase, options) => {
 };
 
 const compileAll = async (name, options = {}) => {
-  const { mdast, hast, jsx } = await Parallel({
+  const rawHighlighter = createHighlighter(options);
+
+  let counter = 0;
+  const highlighter = (...args) => {
+    counter++;
+    return rawHighlighter(...args);
+  };
+
+  const { mdast, hast, jsx, mdastWithExisting, hastWithExisting, jsxWithExisting } = await Parallel({
     mdast: async () => {
       const output = await compileMdAst(name, options);
       await writeFile(join(OUTPUTS, `${name}.mdast.html`), output);
@@ -166,11 +175,34 @@ const compileAll = async (name, options = {}) => {
       const output = await compileJsx(src, options);
       await writeFile(join(OUTPUTS, `${name}.jsx.html`), output);
 
+      return output;
+    },
+    mdastWithExisting: async () => {
+      const output = await compileMdAst(name, {...options, highlighter});
+      await writeFile(join(OUTPUTS, `${name}.mdastWithExisting.html`), output);
+
+      return output;
+    },
+    hastWithExisting: async () => {
+      const output = await compileHAst(name, {...options, highlighter});
+      await writeFile(join(OUTPUTS, `${name}.hastWithExisting.html`), output);
+
+      return output;
+    },
+    jsxWithExisting: async () => {
+      const src = await readFile(join(FIXTURES, `${name}.md`));
+      const output = await compileJsx(src, {...options, highlighter});
+      await writeFile(join(OUTPUTS, `${name}.jsxWithExisting.html`), output);
+
       return output;
     },
   });
 
-  return [mdast, hast, jsx];
+  if (counter < 2) {
+    throw new Error(`Existing highlighter only used ${counter} time(s)`);
+  }
+
+  return [mdast, hast, jsx, mdastWithExisting, hastWithExisting, jsxWithExisting];
 };
 
 const fixtures = readdirSync(FIXTURES)
@@ -179,7 +211,7 @@ const fixtures = readdirSync(FIXTURES)
 
 for (const name of fixtures) {
   test(name, async (t) => {
-    const [mdast, hast, jsx] = await compileAll(name, {
+    const [mdast, hast, jsx, mdastWithExisting, hastWithExisting, jsxWithExisting] = await compileAll(name, {
       plugins: [
         ...(PLUGINS.includes(name)
           ? [name]
@@ -200,8 +232,11 @@ for (const name of fixtures) {
     t.snapshot(mdast);
     t.snapshot(hast);
     t.snapshot(jsx);
+    t.snapshot(mdastWithExisting);
+    t.snapshot(hastWithExisting);
+    t.snapshot(jsxWithExisting);
 
-    await ForEach(['jsx', 'mdast', 'hast'], async (type) => {
+    await ForEach(['jsx', 'mdast', 'hast', 'jsxWithExisting', 'hastWithExisting', 'jsxWithExisting'], async (type) => {
       return takeScreenshot(
         join(OUTPUTS, `${name}.${type}.html`),
         join(OUTPUTS, `${name}.${type}.png`),

diff --git a/test/outputs/all.hast.png b/test/outputs/all.hast.png
diff --git a/test/outputs/all.hastWithExisting.html b/test/outputs/all.hastWithExisting.html
diff --git a/test/outputs/all.hastWithExisting.png b/test/outputs/all.hastWithExisting.png
diff --git a/test/outputs/all.jsx.png b/test/outputs/all.jsx.png
diff --git a/test/outputs/all.jsxWithExisting.html b/test/outputs/all.jsxWithExisting.html
diff --git a/test/outputs/all.jsxWithExisting.png b/test/outputs/all.jsxWithExisting.png
diff --git a/test/outputs/all.mdast.png b/test/outputs/all.mdast.png
diff --git a/test/outputs/all.mdastWithExisting.html b/test/outputs/all.mdastWithExisting.html
diff --git a/test/outputs/autolinker.hast.png b/test/outputs/autolinker.hast.png
diff --git a/test/outputs/autolinker.hastWithExisting.html b/test/outputs/autolinker.hastWithExisting.html
@@ -0,0 +1,39 @@
+<link href="./theme.css" rel="stylesheet" />
+<div class="remark-highlight">
+  <pre
+    class="language-js"
+  ><code class="language-js"><span class="token doc-comment comment">/**
+ * Prism: Lightweight, robust, elegant syntax highlighting
+ * MIT license http://www.opensource.org/licenses/mit-license.php/
+ * <span class="token keyword">@author</span> Lea Verou http://lea.verou.me
+ * Reach Lea at [email protected] (no, not really)
+ * And this is a Markdown link. Sweet, huh?
+ */</span>
+<span class="token keyword">var</span> foo <span class="token operator">=</span> <span class="token number">5</span><span class="token punctuation">;</span>
+<span class="token comment">// And a single line comment <a href="http://google.com" class="token url-link">http://google.com</a></span>
+</code></pre>
+</div>
+<div class="remark-highlight">
+  <pre
+    class="language-css"
+  ><code class="language-css"><span class="token atrule"><span class="token rule">@font-face</span></span> <span class="token punctuation">{</span>
+  <span class="token property">src</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><a href="http://lea.verou.me/logo.otf" class="token url-link">http://lea.verou.me/logo.otf</a><span class="token punctuation">)</span></span><span class="token punctuation">;</span>
+  <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'LeaVerou'</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+</code></pre>
+</div>
+<div class="remark-highlight">
+  <pre
+    class="language-html"
+  ><code class="language-html"><span class="token comment">&#x3C;!-- Links in HTML, woo!
+Lea Verou <a href="http://lea.verou.me" class="token url-link">http://lea.verou.me</a> or, with Markdown, Lea Verou --></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><a href="http://prismjs.com/img/spectrum.png" class="token url-link">http://prismjs.com/img/spectrum.png</a><span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>In attributes too!<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>p</span><span class="token punctuation">></span></span>Autolinking in raw text: <a href="http://prismjs.com" class="token url-link">http://prismjs.com</a><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>p</span><span class="token punctuation">></span></span>
+</code></pre>
+</div>
+<div class="remark-highlight">
+  <pre
+    class="language-markdown"
+  ><code class="language-markdown"><span class="token url">[<span class="token content">Text you want to see</span>](<span class="token url"><a href="http://url-goes-here.com" class="token url-link">http://url-goes-here.com</a></span>)</span>
+</code></pre>
+</div>
diff --git a/test/outputs/autolinker.hastWithExisting.png b/test/outputs/autolinker.hastWithExisting.png
diff --git a/test/outputs/autolinker.jsx.png b/test/outputs/autolinker.jsx.png
diff --git a/test/outputs/autolinker.jsxWithExisting.html b/test/outputs/autolinker.jsxWithExisting.html
@@ -0,0 +1,44 @@
+<link href="./theme.css" rel="stylesheet" /><wrapper
+  ><div class="remark-highlight">
+    <pre
+      class="language-js"
+      parentName="div"
+    ><code class="language-js" parentName="pre"><span class="token doc-comment comment" parentName="code">/**
+ * Prism: Lightweight, robust, elegant syntax highlighting
+ * MIT license http://www.opensource.org/licenses/mit-license.php/
+ * <span class="token keyword" parentName="span">@author</span> Lea Verou http://lea.verou.me
+ * Reach Lea at [email protected] (no, not really)
+ * And this is a Markdown link. Sweet, huh?
+ */</span>
+<span class="token keyword" parentName="code">var</span> foo <span class="token operator" parentName="code">=</span> <span class="token number" parentName="code">5</span><span class="token punctuation" parentName="code">;</span>
+<span class="token comment" parentName="code">// And a single line comment <a href="http://google.com" class="token url-link" parentName="span">http://google.com</a></span>
+</code></pre>
+  </div>
+  <div class="remark-highlight">
+    <pre
+      class="language-css"
+      parentName="div"
+    ><code class="language-css" parentName="pre"><span class="token atrule" parentName="code"><span class="token rule" parentName="span">@font-face</span></span> <span class="token punctuation" parentName="code">{</span>
+  <span class="token property" parentName="code">src</span><span class="token punctuation" parentName="code">:</span> <span class="token url" parentName="code"><span class="token function" parentName="span">url</span><span class="token punctuation" parentName="span">(</span><a href="http://lea.verou.me/logo.otf" class="token url-link" parentName="span">http://lea.verou.me/logo.otf</a><span class="token punctuation" parentName="span">)</span></span><span class="token punctuation" parentName="code">;</span>
+  <span class="token property" parentName="code">font-family</span><span class="token punctuation" parentName="code">:</span> <span class="token string" parentName="code">&#x27;LeaVerou&#x27;</span><span class="token punctuation" parentName="code">;</span>
+<span class="token punctuation" parentName="code">}</span>
+</code></pre>
+  </div>
+  <div class="remark-highlight">
+    <pre
+      class="language-html"
+      parentName="div"
+    ><code class="language-html" parentName="pre"><span class="token comment" parentName="code">&lt;!-- Links in HTML, woo!
+Lea Verou <a href="http://lea.verou.me" class="token url-link" parentName="span">http://lea.verou.me</a> or, with Markdown, Lea Verou --&gt;</span>
+<span class="token tag" parentName="code"><span class="token tag" parentName="span"><span class="token punctuation" parentName="span">&lt;</span>img</span> <span class="token attr-name" parentName="span">src</span><span class="token attr-value" parentName="span"><span class="token punctuation attr-equals" parentName="span">=</span><span class="token punctuation" parentName="span">&quot;</span><a href="http://prismjs.com/img/spectrum.png" class="token url-link" parentName="span">http://prismjs.com/img/spectrum.png</a><span class="token punctuation" parentName="span">&quot;</span></span> <span class="token attr-name" parentName="span">alt</span><span class="token attr-value" parentName="span"><span class="token punctuation attr-equals" parentName="span">=</span><span class="token punctuation" parentName="span">&quot;</span>In attributes too!<span class="token punctuation" parentName="span">&quot;</span></span> <span class="token punctuation" parentName="span">/&gt;</span></span>
+<span class="token tag" parentName="code"><span class="token tag" parentName="span"><span class="token punctuation" parentName="span">&lt;</span>p</span><span class="token punctuation" parentName="span">&gt;</span></span>Autolinking in raw text: <a href="http://prismjs.com" class="token url-link" parentName="code">http://prismjs.com</a><span class="token tag" parentName="code"><span class="token tag" parentName="span"><span class="token punctuation" parentName="span">&lt;/</span>p</span><span class="token punctuation" parentName="span">&gt;</span></span>
+</code></pre>
+  </div>
+  <div class="remark-highlight">
+    <pre
+      class="language-markdown"
+      parentName="div"
+    ><code class="language-markdown" parentName="pre"><span class="token url" parentName="code">[<span class="token content" parentName="span">Text you want to see</span>](<span class="token url" parentName="span"><a href="http://url-goes-here.com" class="token url-link" parentName="span">http://url-goes-here.com</a></span>)</span>
+</code></pre>
+  </div></wrapper
+>
diff --git a/test/outputs/autolinker.jsxWithExisting.png b/test/outputs/autolinker.jsxWithExisting.png
diff --git a/test/outputs/autolinker.mdast.png b/test/outputs/autolinker.mdast.png
diff --git a/test/outputs/autolinker.mdastWithExisting.html b/test/outputs/autolinker.mdastWithExisting.html
@@ -0,0 +1,39 @@
+<link href="./theme.css" rel="stylesheet" />
+<div class="remark-highlight">
+  <pre
+    class="language-js"
+  ><code class="language-js"><span class="token doc-comment comment">/**
+ * Prism: Lightweight, robust, elegant syntax highlighting
+ * MIT license http://www.opensource.org/licenses/mit-license.php/
+ * <span class="token keyword">@author</span> Lea Verou http://lea.verou.me
+ * Reach Lea at [email protected] (no, not really)
+ * And this is a Markdown link. Sweet, huh?
+ */</span>
+<span class="token keyword">var</span> foo <span class="token operator">=</span> <span class="token number">5</span><span class="token punctuation">;</span>
+<span class="token comment">// And a single line comment <a href="http://google.com" class="token url-link">http://google.com</a></span>
+</code></pre>
+</div>
+<div class="remark-highlight">
+  <pre
+    class="language-css"
+  ><code class="language-css"><span class="token atrule"><span class="token rule">@font-face</span></span> <span class="token punctuation">{</span>
+  <span class="token property">src</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><a href="http://lea.verou.me/logo.otf" class="token url-link">http://lea.verou.me/logo.otf</a><span class="token punctuation">)</span></span><span class="token punctuation">;</span>
+  <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'LeaVerou'</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+</code></pre>
+</div>
+<div class="remark-highlight">
+  <pre
+    class="language-html"
+  ><code class="language-html"><span class="token comment">&#x3C;!-- Links in HTML, woo!
+Lea Verou <a href="http://lea.verou.me" class="token url-link">http://lea.verou.me</a> or, with Markdown, Lea Verou --></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><a href="http://prismjs.com/img/spectrum.png" class="token url-link">http://prismjs.com/img/spectrum.png</a><span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>In attributes too!<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>p</span><span class="token punctuation">></span></span>Autolinking in raw text: <a href="http://prismjs.com" class="token url-link">http://prismjs.com</a><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>p</span><span class="token punctuation">></span></span>
+</code></pre>
+</div>
+<div class="remark-highlight">
+  <pre
+    class="language-markdown"
+  ><code class="language-markdown"><span class="token url">[<span class="token content">Text you want to see</span>](<span class="token url"><a href="http://url-goes-here.com" class="token url-link">http://url-goes-here.com</a></span>)</span>
+</code></pre>
+</div>
diff --git a/test/outputs/command-line.hast.png b/test/outputs/command-line.hast.png
diff --git a/test/outputs/command-line.hastWithExisting.html b/test/outputs/command-line.hastWithExisting.html
@@ -0,0 +1,17 @@
+<link href="./theme.css" rel="stylesheet" />
+<div class="remark-highlight">
+  <pre
+    data-user="chris"
+    data-host="remotehost"
+    data-output="2,4-8"
+    class="language-bash"
+  ><code class="language-bash"><span class="token builtin class-name">pwd</span>
+/usr/home/chris/bin
+<span class="token function">ls</span> -la
+total <span class="token number">2</span>
+drwxr-xr-x   <span class="token number">2</span> chris  chris     <span class="token number">11</span> Jan <span class="token number">10</span> <span class="token number">16</span>:48 <span class="token builtin class-name">.</span>
+drwxr--r-x  <span class="token number">45</span> chris  chris     <span class="token number">92</span> Feb <span class="token number">14</span> <span class="token number">11</span>:10 <span class="token punctuation">..</span>
+-rwxr-xr-x   <span class="token number">1</span> chris  chris    <span class="token number">444</span> Aug <span class="token number">25</span>  <span class="token number">2013</span> backup
+-rwxr-xr-x   <span class="token number">1</span> chris  chris    <span class="token number">642</span> Jan <span class="token number">17</span> <span class="token number">14</span>:42 deploy
+</code></pre>
+</div>
diff --git a/test/outputs/command-line.hastWithExisting.png b/test/outputs/command-line.hastWithExisting.png
diff --git a/test/outputs/command-line.jsx.png b/test/outputs/command-line.jsx.png
diff --git a/test/outputs/command-line.jsxWithExisting.html b/test/outputs/command-line.jsxWithExisting.html
@@ -0,0 +1,19 @@
+<link href="./theme.css" rel="stylesheet" /><wrapper
+  ><div class="remark-highlight">
+    <pre
+      data-user="chris"
+      data-host="remotehost"
+      data-output="2,4-8"
+      class="language-bash"
+      parentName="div"
+    ><code class="language-bash" parentName="pre"><span class="token builtin class-name" parentName="code">pwd</span>
+/usr/home/chris/bin
+<span class="token function" parentName="code">ls</span> -la
+total <span class="token number" parentName="code">2</span>
+drwxr-xr-x   <span class="token number" parentName="code">2</span> chris  chris     <span class="token number" parentName="code">11</span> Jan <span class="token number" parentName="code">10</span> <span class="token number" parentName="code">16</span>:48 <span class="token builtin class-name" parentName="code">.</span>
+drwxr--r-x  <span class="token number" parentName="code">45</span> chris  chris     <span class="token number" parentName="code">92</span> Feb <span class="token number" parentName="code">14</span> <span class="token number" parentName="code">11</span>:10 <span class="token punctuation" parentName="code">..</span>
+-rwxr-xr-x   <span class="token number" parentName="code">1</span> chris  chris    <span class="token number" parentName="code">444</span> Aug <span class="token number" parentName="code">25</span>  <span class="token number" parentName="code">2013</span> backup
+-rwxr-xr-x   <span class="token number" parentName="code">1</span> chris  chris    <span class="token number" parentName="code">642</span> Jan <span class="token number" parentName="code">17</span> <span class="token number" parentName="code">14</span>:42 deploy
+</code></pre>
+  </div></wrapper
+>
diff --git a/test/outputs/command-line.jsxWithExisting.png b/test/outputs/command-line.jsxWithExisting.png
diff --git a/test/outputs/command-line.mdast.png b/test/outputs/command-line.mdast.png
diff --git a/test/outputs/command-line.mdastWithExisting.html b/test/outputs/command-line.mdastWithExisting.html
@@ -0,0 +1,17 @@
+<link href="./theme.css" rel="stylesheet" />
+<div class="remark-highlight">
+  <pre
+    data-user="chris"
+    data-host="remotehost"
+    data-output="2,4-8"
+    class="language-bash"
+  ><code class="language-bash"><span class="token builtin class-name">pwd</span>
+/usr/home/chris/bin
+<span class="token function">ls</span> -la
+total <span class="token number">2</span>
+drwxr-xr-x   <span class="token number">2</span> chris  chris     <span class="token number">11</span> Jan <span class="token number">10</span> <span class="token number">16</span>:48 <span class="token builtin class-name">.</span>
+drwxr--r-x  <span class="token number">45</span> chris  chris     <span class="token number">92</span> Feb <span class="token number">14</span> <span class="token number">11</span>:10 <span class="token punctuation">..</span>
+-rwxr-xr-x   <span class="token number">1</span> chris  chris    <span class="token number">444</span> Aug <span class="token number">25</span>  <span class="token number">2013</span> backup
+-rwxr-xr-x   <span class="token number">1</span> chris  chris    <span class="token number">642</span> Jan <span class="token number">17</span> <span class="token number">14</span>:42 deploy
+</code></pre>
+</div>
diff --git a/test/outputs/data-uri-highlight.hast.png b/test/outputs/data-uri-highlight.hast.png