CODEWITHSUNDEEP
javascriptsyntax-highlighting
Giel Berkers
Giel Berkers

Reputation: 2960

How to use data-manual in prism.js

I'm using prism.js as a syntax highlighter for my website, but I want certain items not te be rendered, like operators and punctuation.

Now, the manual of prism.js states:

If you want to prevent any elements from being automatically highlighted, you can use the attribute data-manual on the element you used for prism and use the API. Example:

<script src="prism.js" data-manual></script>

But that's it. No further examples. The link to the API only shows some JavaScript functions, but nothing further on data-manual. Als if I Google site:prismjs.com "data-manual", no helpful occurances show up.

Can anyone help me on how the illusive data-manual-attribute needs to be used?

Upvotes: 3

Views: 2442

Answers (2)

Vladimir S.
Vladimir S.

Reputation: 511

I think, here is a good example. The credit goes to Gregory Schier.

HTML:

<script src="prism.js" data-manual></script>
<pre>
<code id="some-code" class="language-javascript">
  // This is some random code
  var foo = "bar";
</code>
</pre>

JavaScript:

var block = document.getElementById('some-code');
Prism.highlightElement(block);

Upvotes: 4

alexwweston
alexwweston

Reputation: 86

I also didn't understand how to use data-manual from the documentation--I had to look at the source. Use 'data-manual' when you want to directly call prism's api for adding syntax highlighting. Checkout the api reference.

If you don't set data-manual, prism will set up a timeout or listener to call highlightAll (here is the relevant source). This will highlight every element matched by the following selector: 'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'

If you want finer-grained control of timing, or maybe don't want prism adding extra classes, add data-manual to the script tag for the script that contains prismjs, then call highlight yourself. Here's a basic ES6 example of how you might use Prism in manual mode:

import {highlight} from 'prismjs';
import 'prismjs/components/prism-python';

const pythonCode = 'myString = "Some String"';
const highlightedCode = highlight(pythonCode, Prism.languages.python);
const highlightedHTML = `<pre><code class="language-python">${highlightedCode}</code></pre>`;
document.getElementById('myID').innerHTML=highlightedHTML;

Upvotes: 2

Related Questions