Zenn
Open5

Freshでhighlight.jsを使う

Deno
fresh
hashrockhashrock

coreのみインポートしたバージョン

import hljs from "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/es/core.min.js";
import ts from "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/es/languages/typescript.min.js";

interface CodeBlockProps {
  code: string;
}

export default function CodeBlock(props: CodeBlockProps) {
  hljs.registerLanguage("ts", ts);
  const result = hljs.highlight(props.code, {
    language: "ts",
  });

  return (
    <div class="">
      <div class="relative">
        <pre class="bg-gray-800 text-blue-300 p-2 text-sm rounded whitespace-pre-wrap">
          <code
            dangerouslySetInnerHTML={{ __html: result.value }}
          >
          </code>
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css"></link>
        </pre>
      </div>
    </div>
  );
}
hashrockhashrock

coreをimport すると、20KB + 7KBくらい

│   └─┬ file:///Users/hashrock/code/hashrock/fresh-components-beta/components/CodeBlockHljs.tsx (852B)
│ │     ├── https://esm.sh/preact@10.15.1/jsx-runtime *
│ │     ├── https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/es/core.min.js (19.85KB)
│ │     └── https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/es/languages/typescript.min.js (7.45KB)
hashrockhashrock

フル機能版の場合は118KB

│ │   └─┬ file:///Users/hashrock/code/hashrock/fresh-components-beta/components/CodeBlockHljs.tsx (755B)
│ │     ├── https://esm.sh/preact@10.15.1/jsx-runtime *
│ │     ├── https://esm.sh/preact@10.15.1/hooks *
│ │     └── https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/es/highlight.min.js (118.17KB)
hashrockhashrock

prismでも十分小さい

 │   │ ├─┬ https://esm.sh/prismjs@1.27.0 (158B)
│ │   │ │ ├── https://esm.sh/v132/@types/prismjs@1.26.0/index.d.ts (15.46KB)
│ │   │ │ └── https://esm.sh/v132/prismjs@1.27.0/denonext/prismjs.mjs (19.38KB)
│ │   │ └─┬ https://esm.sh/prismjs@1.27.0/components/prism-typescript?no-check (224B)
│ │   │   └── https://esm.sh/v132/prismjs@1.27.0/denonext/components/prism-typescript.js (2.13KB)