A web component that renders <pre><code> tags and a copy icon button.
npm i -S @substrate-system/code-blockimport '@substrate-system/code-block'
import '@substrate-system/code-block/css'<code-block>
const answer = 42
</code-block>This package exposes ESM and CommonJS via
package.json exports field.
Full component (render + hydrate). It registers <code-block> when imported.
import '@substrate-system/code-block'
import '@substrate-system/code-block/css'<code-block>
const answer = 42
</code-block>Client-only behavior (hydration only). Use this to hydrate HTML that was rendered on the server.
import { define } from '@substrate-system/code-block/client'
import '@substrate-system/code-block/css'
define()Server-side HTML renderer.
import { CodeBlock } from '@substrate-system/code-block/html'
const html = CodeBlock({
code: 'console.log("hello")',
copyHint: true,
copyButtonLabel: 'Copy code to clipboard'
})CodeBlock.outerHTML(options, attrs) is also provided to generate the host
element wrapper.
require('@substrate-system/code-block')import '@substrate-system/code-block/css'Or minified:
import '@substrate-system/code-block/min/css'Supported on <code-block>:
hint— Enables copy feedback hint when present. Usehint="false"to disable.copy-button-label— Accessible label/title for the icon button. Default:Copy code to clipboard.
import { CodeBlock } from '@substrate-system/code-block/html'
const html = CodeBlock.outerHTML({
code: 'npm i -S @substrate-system/code-block'
})import { define } from '@substrate-system/code-block/client'
import '@substrate-system/code-block/css'
define()This package exposes minified JS/CSS in dist/.
cp ./node_modules/@substrate-system/code-block/dist/index.min.js ./public/code-block.min.js
cp ./node_modules/@substrate-system/code-block/dist/index.min.css ./public/code-block.css<head>
<link rel="stylesheet" href="./code-block.css">
</head>
<body>
<code-block>console.log('hello')</code-block>
<script type="module" src="./code-block.min.js"></script>
</body>