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

Only the first code block is highlighted when using an async highlighter in 1.1.0 #1684

Closed
qubyte opened this issue May 20, 2020 · 2 comments · Fixed by #1685
Closed

Only the first code block is highlighted when using an async highlighter in 1.1.0 #1684

qubyte opened this issue May 20, 2020 · 2 comments · Fixed by #1685
Labels
category: code blocks L2 - annoying Similar to L1 - broken but there is a known workaround available for the issue

Comments

@qubyte
Copy link

qubyte commented May 20, 2020

Describe the bug
Only the first code block is highlighted when using an async highlighter in 1.1.0

To Reproduce
Steps to reproduce the behavior:

Consider the following simplified code:

var marked = require("marked"); // v1.1.0
var highlightjs = require("highlight.js");

// I realise this could be synchronous. It's asynchronous to
// demonstrate the problem.
function highlight(code, language, callback) {
  return callback(null, highlightjs.highlight(language, code).value);
}

const testString = [
  'Some text.',
  '```javascript',
  'function hello(a, b, c) {',
  '  console.log(a, b, c);',
  '}',
  '```',
  'Some more text.',
  '```javascript',
  'function hello(a, b, c) {',
  '  console.log(a, b, c);',
  '}',
  '```'
].join('\n');

marked(testString, { highlight }, (err, result) => console.log(result));

The resultant logged string is:

<p>Some text.</p>
<pre><code class="language-javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">hello</span>(<span class="hljs-params">a, b, c</span>) </span>{
  <span class="hljs-built_in">console</span>.log(a, b, c);
}</code></pre>
<p>Some more text.</p>
<pre><code class="language-javascript">function hello(a, b, c) {
  console.log(a, b, c);
}</code></pre>

The first code snippet is highlighted, but the second (and all subsequent if you add more) codeblock is not. This only occurs when using an async highlighter.

Expected behavior
All code blocks should be highlighted. The expected output of the above snippet is:

<p>Some text.</p>
<pre><code class="language-javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">hello</span>(<span class="hljs-params">a, b, c</span>) </span>{
  <span class="hljs-built_in">console</span>.log(a, b, c);
}</code></pre>
<p>Some more text.</p>
<pre><code class="language-javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">hello</span>(<span class="hljs-params">a, b, c</span>) </span>{
  <span class="hljs-built_in">console</span>.log(a, b, c);
}</code></pre>
qubyte added a commit to qubyte/qubyte-codes that referenced this issue May 20, 2020
@UziTech
Copy link
Member

UziTech commented May 21, 2020

It looks like it is because the callback gets called synchronously

This should fix it:

function highlight(code, language, callback) {
  setTimeout(() => {
    callback(null, highlightjs.highlight(language, code).value);
  }, 0);
}

@UziTech UziTech added category: code blocks L2 - annoying Similar to L1 - broken but there is a known workaround available for the issue labels May 21, 2020
@qubyte
Copy link
Author

qubyte commented May 21, 2020

This issue actually flagged some old code which I needed to clean up (it can be synchronous now). Thanks for the tip though. 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
category: code blocks L2 - annoying Similar to L1 - broken but there is a known workaround available for the issue
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants