Plugin - @nakedjsx/plugin-asset-prism

Provides a <PrismCode> tag that uses Prism to render code to HTML with syntax highlighting.

A Prism CSS theme that automatically handles light/dark mode is also provided.

This plugin is bundled with the npx nakedjsx command, no installation is necessary.

Here is a usage example that syntax highlights a Node.js hello world program:

src/index-page.jsx

import { Page } from '@nakedjsx/core/page';
import { PrismCode } from '@nakedjsx/plugin-asset-prism/jsx';

import prismTheme from '::@nakedjsx/plugin-asset-prism/theme.css';

// JavaScript source for a Node.js hello world http server
const helloNodeJs =
`const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World');
});

server.listen(port, hostname, () => {
  console.log(\`Server running at http://\${hostname}:\${port}/\`);
});`;

Page.Create('en');
Page.AppendHead(
    <>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href={prismTheme} />
    </>
    );
Page.AppendBody(
    <>
        <h1>@nakedjsx/plugin-asset-prism</h1>
        <p>Try changing between light and dark mode in your OS settings.</p>
        <pre className="language-javascript"><code><PrismCode lang="javascript" code={helloNodeJs} /></code></pre>
    </>
    );
Page.Render();

# build command

$ npx nakedjsx src --out out --plugin prism @nakedjsx/plugin-asset-prism --pretty

The result:

out/asset/nakedjsx-prism-theme.exGR5DXsVGYRNDk0KHq5Oya9uoE.css (3157 bytes) (open in new tab)

/*
 * NakedJSX Prism theme, adapted from the offical Okaida Prism theme:
 * https://github.com/PrismJS/prism/blob/master/themes/prism-okaidia.css
 * Okaida was loosely based on Monokai textmate theme by http://www.monokai.nl/
 *
 * Color values were then replaced with more accessible colours in a11y-light
 * for light mode and a11y-dark and for dark mode.
 * https://github.com/ericwbailey/a11y-syntax-highlighting/blob/main/dist/prism/a11y-light.css
 * https://github.com/ericwbailey/a11y-syntax-highlighting/blob/main/dist/prism/a11y-dark.css
 *
 * See https://nakedjsx.org for more information about NakedJSX.
 */

:root {
    --code-fg-color: #545454;
    --code-bg-color: #f5f5f5;
    --code-comment: #696969;
    --code-punctuation: #545454;
    --code-property: #007299;
    --code-number: #008000;
    --code-string: #aa5d00;
    --code-operator: #008000;
    --code-function: #aa5d00;
    --code-keyword: #d91e18;
    --code-regex: #d91e18;
}
@media (prefers-color-scheme:dark) {
    :root {
        --code-fg-color: #f8f8f2;
        --code-bg-color: #2b2b2b;
        --code-comment: #d4d0ab;
        --code-punctuation: #fefefe;
        --code-property: #ffa07a;
        --code-number: #00e0e0;
        --code-string: #abe338;
        --code-operator: #00e0e0;
        --code-function: #ffd700;
        --code-keyword: #00e0e0;
        --code-regex: #ffd700;
    }
}

code[class*="language-"],
pre[class*="language-"] {
    color: var(--code-fg-color);
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    text-align: left;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    line-height: 1.125;

    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;

    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
...

(content too large to display in full)

out/index.html (3843 bytes) (open in new tab)

<!doctype html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link
            rel="stylesheet"
            href="asset/nakedjsx-prism-theme.exGR5DXsVGYRNDk0KHq5Oya9uoE.css"
        />
    </head>
    <body>
        <h1>@nakedjsx/plugin-asset-prism</h1>
        <p>Try changing between light and dark mode in your OS settings.</p>
        <pre
            class="language-javascript"
        ><code><span class="token keyword">const</span> http <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'http'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> hostname <span class="token operator">=</span> <span class="token string">'127.0.0.1'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> port <span class="token operator">=</span> <span class="token number">3000</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> server <span class="token operator">=</span> http<span class="token punctuation">.</span><span class="token function">createServer</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
  res<span class="token punctuation">.</span>statusCode <span class="token operator">=</span> <span class="token number">200</span><span class="token punctuation">;</span>
  res<span class="token punctuation">.</span><span class="token function">setHeader</span><span class="token punctuation">(</span><span class="token string">'Content-Type'</span><span class="token punctuation">,</span> <span class="token string">'text/plain'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token string">'Hello World'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

server<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span>port<span class="token punctuation">,</span> hostname<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Server running at http://</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>hostname<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">:</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>port<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
    </body>
</html>

←Return to NakedJSX documentation

NakedJSX Plugin - @nakedjsx/plugin-asset-prism

Plugin - @nakedjsx/plugin-asset-prism