hitext-prismjs

Prism.js adapter for HiText.

Why?

Prism is a great syntax highlighting library. But it has some limitations, one of them (like many such libraries have) is composing with other decoration libraries. Prism's introduction claims:

Any pre-existing HTML in the code will be stripped off

And provides some tricky ways to walk around the problem. With HiText the problem can be solved in more elegant way.

For example, in Basic usage section of Prism, it was required to break the code parts of the example to highlight some part.

Install

npm install hitext hitext-prismjs prismjs

NOTE: prismjs is a peer dependancy of hitext-prismjs, so you need to install it by your own. This allows you to update prismjs version without necessary to update hitext-prismjs.

Usage

In browser:

<script src="node_modules/prismjs/prism.js"></script>
<script src="node_modules/hitext/dist/hitext.min.js"></script>
<script src="node_modules/hitext-prismjs/dist/hitext-prismjs.min.js"></script>
<!-- include additional syntaxes if needed -->
<script src="node_modules/prismjs/components/prism-jsx.js"></script>

<script>
    // usage
    console.log(
        hitext([hitextPrismjs('jsx')], 'html')
            .print('<div className={foo}>Hello world!</div>')
    );

    // or
    const preset = hitext()
        .use(hitextPrismjs('jsx'))
        .printer('html');

    console.log(
        preset.print('<div className={foo}>Hello world!</div>')
    );
</script>

In nodejs:

const hitext = require('hitext');
const prism = require('hitext-prismjs');

// include additional syntaxes if needed
// languages available by default:
// "markup", "xml", "html", "mathml", "svg", "css", "clike", "javascript", "js"
require('prismjs/components/prism-jsx');

// usage
console.log(
    hitext([hitextPrismjs('jsx')], 'html')
        .print('<div className={foo}>Hello world!</div>')
);

// or
const preset = hitext()
    .use(prism('jsx'))
    .printer('html');

console.log(
    preset.print('<div className={foo}>Hello world!</div>')
);

Output:

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token script"><span class="token script-punctuation">=</span><span class="token punctuation">{</span>foo<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span>Hello world<span class="token operator">!</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

License

MIT