@substrate-system/code-block

v0.0.2

Published

12 days ago

Code block web component

Downloads

255

0High
0Medium
0Low

nichoth

code web component

code-block

A web component that renders a <pre><code> block with an internal copy icon button.

See a live demo

Install

npm i -S @substrate-system/code-block

Example

import '@substrate-system/code-block'
import '@substrate-system/code-block/css'

<code-block>
  const answer = 42
</code-block>

API

This package exposes ESM and CommonJS via package.json exports field.

`@substrate-system/code-block`

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>

`@substrate-system/code-block/client`

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()

`@substrate-system/code-block/html`

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.

CommonJS

require('@substrate-system/code-block')

CSS

Import CSS

import '@substrate-system/code-block/css'

Or minified:

import '@substrate-system/code-block/min/css'

Attributes

Supported on <code-block>:

hint — Enables copy feedback hint when present. Use hint="false" to disable.
copy-button-label — Accessible label/title for the icon button. Default: Copy code to clipboard.

SSR + Hydration Example

Server

import { CodeBlock } from '@substrate-system/code-block/html'

const html = CodeBlock.outerHTML({
  code: 'npm i -S @substrate-system/code-block'
})

Client

import { define } from '@substrate-system/code-block/client'
import '@substrate-system/code-block/css'

define()

Pre-built Files

This package exposes minified JS/CSS in dist/.

Copy

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

HTML

<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>