CodeBlock
import { CodeBlock } from "@cloudensis/design-system/components/code-block";
export function Example() {
return <CodeBlock lang="tsx">{code}</CodeBlock>;
}コピーしました@import "tailwindcss";
@import "@cloudensis/design-system/index.css";コピーしましたlang を省略するとハイライトしません。コピーしましたlang を渡すと Shiki でハイライトします。同期的に動くので、サーバー側でもブラウザ側でも使えます。
右上のボタンでコードをコピーできます。コピーするとアイコンが 2 秒間チェックマークになります。クリップボード API が使えない場合は、コード全体を選択します。
lang に渡せる値
| 値 | 文法 |
|---|---|
css | CSS |
html | HTML |
javascript / js | JavaScript |
json / jsonc | JSON |
markdown / md | Markdown |
shellscript / sh / bash / shell / zsh | Shell |
tsx / ts / typescript / jsx | TypeScript / TSX |
yaml / yml | YAML |
CSP
コピーボタンはインラインハンドラーで動きます。CSP で script-src を制限している場合は、'unsafe-hashes' と次のハッシュを追加してください。
Content-Security-Policy: script-src 'self' 'unsafe-hashes' 'sha256-04qka7fpAOt+u6jkc+24hm2piuYKlL6aL6v0gIIzpSY='コピーしました