antonmedv/codejar

Document Issue: `Prism.highlightElement` should not be directly used as highlighting function

RyanHaoo opened this issue · 1 comments

Description

README.md demostrates directly passing Prism.highlightElement as the highlighting function:

codejar/README.md

Lines 34 to 39 in f7e41cf

```html
<div class="editor"></div>
<script>
let jar = CodeJar(document.querySelector('.editor'), Prism.highlightElement)
</script>
```

However its signature is different from what codeJar expects:

// Prism.highlightElement
(element: HTMLElement, async: Boolean, callback: Function) => void

// What codeJar expects
(e: HTMLElement, pos?: Position) => void

Issue

So when pos is truthy, Prism.js is asked to use worker for every highlighting call and summons confusing error if it is not properly configured to do so.

In my case, an Uncaught SyntaxError: Unexpected token '<' (at undefined:1:1) without any stack trace is thrown on Chrome every time a user types something because the new worker instance gets a html page as it's code.

Solution

  1. Wrap the Prism.highlightElement.
let jar = CodeJar(
    document.querySelector('.editor'),
    el => Prism.highlightElement(el)
)
  1. Use highlight.js which has a compatible signature.
let jar = CodeJar(document.querySelector('.editor'), hljs.highlightElement)

I can make a PR to fix this if you don't have time. And thanks for this great library!

Please, make a PR)