@haklex/rich-renderer-codeblock 0.0.1

package/LICENSE

@@ -0,0 +1,28 @@
+MIT License
+
+Copyright (c) 2024 Innei
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+
+Additional Terms and Conditions
+
+----------------
+
+Use of this software is governed by the terms of MIT and, in addition, by the terms and conditions described in the additional file (ADDITIONAL_TERMS.md). By using this software, you agree to abide by these additional terms and conditions.

package/README.md

@@ -0,0 +1,48 @@
+# @haklex/rich-renderer-codeblock
+
+基于 Shiki 的代码块渲染器。
+
+## 安装
+
+```bash
+pnpm add @haklex/rich-renderer-codeblock @haklex/rich-editor shiki
+```
+
+## 导出
+
+```ts
+export { CodeBlockRenderer } from './CodeBlockRenderer'
+export { CodeBlockEditRenderer } from './CodeBlockEditRenderer'
+```
+
+## 功能
+
+- Shiki 语法高亮
+- 自动检测语言
+- 行号显示
+- 复制按钮
+- 自动适配深浅主题
+
+## 使用
+
+```tsx
+import { CodeBlockRenderer } from '@haklex/rich-renderer-codeblock'
+import type { RendererConfig } from '@haklex/rich-editor'
+
+const config: RendererConfig = {
+  CodeBlock: CodeBlockRenderer,
+}
+```
+
+## 依赖
+
+```json
+{
+  "@haklex/rich-editor": "workspace:*",
+  "shiki": "^3.0.0"
+}
+```
+
+## License
+
+MIT

package/dist/CodeBlockCard.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+interface CodeBlockCardProps {
+    code: string;
+    language: string;
+    children: ReactNode;
+}
+export declare function CodeBlockCard({ code, language, children, }: CodeBlockCardProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CodeBlockCard.d.ts.map

package/dist/CodeBlockCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeBlockCard.d.ts","sourceRoot":"","sources":["../src/CodeBlockCard.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAA;AAGrB,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAcrD,UAAU,kBAAkB;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,QAAQ,EACR,QAAQ,GACT,EAAE,kBAAkB,2CAwFpB"}

package/dist/CodeBlockEditRenderer.d.ts

@@ -0,0 +1,4 @@
+import { CodeBlockRendererProps } from '@haklex/rich-editor';
+import { ComponentType } from 'react';
+export declare const CodeBlockEditRenderer: ComponentType<CodeBlockRendererProps>;
+//# sourceMappingURL=CodeBlockEditRenderer.d.ts.map

package/dist/CodeBlockEditRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeBlockEditRenderer.d.ts","sourceRoot":"","sources":["../src/CodeBlockEditRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AAEjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAO1C,eAAO,MAAM,qBAAqB,EAAE,aAAa,CAAC,sBAAsB,CA4KvE,CAAA"}

package/dist/CodeBlockRenderer.d.ts

@@ -0,0 +1,5 @@
+import { CodeBlockRendererProps } from '@haklex/rich-editor';
+import { ComponentType } from 'react';
+export declare const CodeBlockRenderer: ComponentType<CodeBlockRendererProps>;
+export default CodeBlockRenderer;
+//# sourceMappingURL=CodeBlockRenderer.d.ts.map

package/dist/CodeBlockRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeBlockRenderer.d.ts","sourceRoot":"","sources":["../src/CodeBlockRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AAEjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAO1C,eAAO,MAAM,iBAAiB,EAAE,aAAa,CAAC,sBAAsB,CA8DnE,CAAA;AAED,eAAe,iBAAiB,CAAA"}

package/dist/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const languageToIconMap: Record<string, string>;
+export declare const languageToColorMap: Record<string, string>;
+export declare function normalizeLanguage(lang: string | undefined): string;
+export declare function getLanguageDisplayName(lang: string): string;
+//# sourceMappingURL=constants.d.ts.map

package/dist/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CA8BpD,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CA8BrD,CAAA;AAED,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAGlE;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAG3D"}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { CodeBlockEditRenderer } from './CodeBlockEditRenderer';
+export { CodeBlockRenderer } from './CodeBlockRenderer';
+export { CodeBlockRenderer as default } from './CodeBlockRenderer';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,iBAAiB,IAAI,OAAO,EAAE,MAAM,qBAAqB,CAAA"}

package/dist/index.mjs

@@ -0,0 +1,338 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useColorScheme } from "@haklex/rich-editor";
+import { useState, useRef, useEffect, useCallback, useMemo } from "react";
+import { Check, Copy, ChevronDown } from "lucide-react";
+const languageToIconMap = {
+  javascript: "JS",
+  js: "JS",
+  typescript: "TS",
+  ts: "TS",
+  jsx: "JSX",
+  tsx: "TSX",
+  html: "HTML",
+  css: "CSS",
+  scss: "SCSS",
+  json: "JSON",
+  markdown: "MD",
+  md: "MD",
+  bash: "SH",
+  sh: "SH",
+  shell: "SH",
+  zsh: "SH",
+  python: "PY",
+  py: "PY",
+  rust: "RS",
+  go: "GO",
+  java: "JAVA",
+  c: "C",
+  cpp: "C++",
+  "c++": "C++",
+  swift: "SW",
+  kotlin: "KT",
+  yaml: "YAML",
+  yml: "YAML",
+  sql: "SQL"
+};
+const languageToColorMap = {
+  javascript: "#f7df1e",
+  js: "#f7df1e",
+  typescript: "#3178c6",
+  ts: "#3178c6",
+  jsx: "#61dafb",
+  tsx: "#61dafb",
+  html: "#e34f26",
+  css: "#1572b6",
+  scss: "#cc6699",
+  json: "#f59e0b",
+  markdown: "#737373",
+  md: "#737373",
+  bash: "#4eaa25",
+  sh: "#4eaa25",
+  shell: "#4eaa25",
+  zsh: "#4eaa25",
+  python: "#3776ab",
+  py: "#3776ab",
+  rust: "#dea584",
+  go: "#00add8",
+  java: "#b07219",
+  c: "#a8b9cc",
+  cpp: "#00599c",
+  "c++": "#00599c",
+  swift: "#fa7343",
+  kotlin: "#7f52ff",
+  yaml: "#cb171e",
+  yml: "#cb171e",
+  sql: "#e38c00"
+};
+function normalizeLanguage(lang) {
+  if (!lang) return "text";
+  return lang.trim().toLowerCase() || "text";
+}
+function getLanguageDisplayName(lang) {
+  if (lang === "text") return "TEXT";
+  return lang.toUpperCase();
+}
+const CopyIcon = /* @__PURE__ */ jsx(Copy, { size: 16 });
+const CheckIcon = /* @__PURE__ */ jsx(Check, { size: 16 });
+const ExpandIcon = /* @__PURE__ */ jsx(ChevronDown, { size: 14 });
+function CodeBlockCard({
+  code,
+  language,
+  children
+}) {
+  const normalizedLanguage = normalizeLanguage(language);
+  const [copied, setCopied] = useState(false);
+  const copyTimerRef = useRef(void 0);
+  const [isCollapsed, setIsCollapsed] = useState(true);
+  const [isOverflow, setIsOverflow] = useState(false);
+  const scrollRef = useRef(null);
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const check = () => {
+      const halfVh = window.innerHeight / 2;
+      setIsOverflow(el.scrollHeight >= halfVh);
+    };
+    const raf = requestAnimationFrame(check);
+    return () => cancelAnimationFrame(raf);
+  }, [code]);
+  useEffect(() => {
+    return () => clearTimeout(copyTimerRef.current);
+  }, []);
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText(code).then(() => {
+      setCopied(true);
+      clearTimeout(copyTimerRef.current);
+      copyTimerRef.current = setTimeout(() => setCopied(false), 2e3);
+    }).catch(() => {
+    });
+  }, [code]);
+  const languageIcon = languageToIconMap[normalizedLanguage] || "";
+  const languageLabel = getLanguageDisplayName(normalizedLanguage);
+  const accent = languageToColorMap[normalizedLanguage] || "#737373";
+  const cardStyle = useMemo(
+    () => ({ "--rr-code-accent": accent }),
+    [accent]
+  );
+  const scrollClassName = [
+    "rr-code-scroll",
+    isCollapsed && isOverflow && "rr-code-scroll-collapsed"
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: "rr-code-card", style: cardStyle, children: [
+    normalizedLanguage !== "text" && /* @__PURE__ */ jsx("div", { className: "rr-code-lang", "aria-hidden": true, children: languageIcon || languageLabel }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "rr-code-copy",
+        onClick: handleCopy,
+        "aria-label": copied ? "Copied" : "Copy code",
+        children: copied ? CheckIcon : CopyIcon
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "rr-code-bg", children: [
+      /* @__PURE__ */ jsx("div", { ref: scrollRef, className: scrollClassName, children }),
+      isOverflow && isCollapsed && /* @__PURE__ */ jsx("div", { className: "rr-code-expand-wrap", children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "rr-code-expand",
+          onClick: () => setIsCollapsed(false),
+          children: [
+            ExpandIcon,
+            /* @__PURE__ */ jsx("span", { children: "展开" })
+          ]
+        }
+      ) })
+    ] })
+  ] });
+}
+let highlighterPromise = null;
+function getHighlighter() {
+  if (!highlighterPromise) {
+    highlighterPromise = import("shiki/bundle/web").then(
+      (mod) => mod.createHighlighter({
+        langs: [],
+        themes: ["github-light", "github-dark"]
+      })
+    );
+  }
+  return highlighterPromise;
+}
+async function getHighlighterWithLang(language) {
+  const highlighter = await getHighlighter();
+  if (language && language !== "text" && language !== "plaintext") {
+    const loaded = highlighter.getLoadedLanguages();
+    if (!loaded.includes(language)) {
+      try {
+        await highlighter.loadLanguage(language);
+      } catch {
+      }
+    }
+  }
+  return highlighter;
+}
+const SHIKI_THEMES = {
+  light: "github-light",
+  dark: "github-dark"
+};
+const CodeBlockEditRenderer = ({
+  code,
+  language,
+  showLineNumbers = true,
+  editable = false,
+  onCodeChange
+}) => {
+  const colorScheme = useColorScheme();
+  const normalizedLanguage = normalizeLanguage(language);
+  const [loaded, setLoaded] = useState(false);
+  const containerRef = useRef(null);
+  const editorRef = useRef(null);
+  const onCodeChangeRef = useRef(onCodeChange);
+  onCodeChangeRef.current = onCodeChange;
+  const latestPropsRef = useRef({
+    code,
+    normalizedLanguage,
+    colorScheme,
+    showLineNumbers,
+    editable
+  });
+  latestPropsRef.current = {
+    code,
+    normalizedLanguage,
+    colorScheme,
+    showLineNumbers,
+    editable
+  };
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    let disposed = false;
+    let inputCleanup = null;
+    (async () => {
+      const props = latestPropsRef.current;
+      const [highlighter, { shikiCode }] = await Promise.all([
+        getHighlighterWithLang(props.normalizedLanguage),
+        import("shikicode")
+      ]);
+      if (disposed) return;
+      const theme = SHIKI_THEMES[props.colorScheme];
+      const loaded2 = highlighter.getLoadedLanguages();
+      const lang = loaded2.includes(props.normalizedLanguage) ? props.normalizedLanguage : "text";
+      const editor = shikiCode().withOptions({
+        readOnly: !props.editable,
+        lineNumbers: props.showLineNumbers ? "on" : "off"
+      }).create(container, highlighter, {
+        value: props.code,
+        language: lang,
+        theme
+      });
+      if (!props.editable) {
+        editor.input.tabIndex = -1;
+      }
+      const handleInput = () => {
+        onCodeChangeRef.current?.(editor.input.value);
+      };
+      editor.input.addEventListener("input", handleInput);
+      inputCleanup = () => editor.input.removeEventListener("input", handleInput);
+      editorRef.current = editor;
+      setLoaded(true);
+    })();
+    return () => {
+      disposed = true;
+      inputCleanup?.();
+      editorRef.current?.dispose();
+      editorRef.current = null;
+      setLoaded(false);
+    };
+  }, []);
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    let cancelled = false;
+    (async () => {
+      const { highlighter } = editor;
+      const loaded2 = highlighter.getLoadedLanguages();
+      if (normalizedLanguage !== "text" && normalizedLanguage !== "plaintext" && !loaded2.includes(normalizedLanguage)) {
+        try {
+          await highlighter.loadLanguage(normalizedLanguage);
+        } catch {
+        }
+      }
+      if (cancelled) return;
+      const resolvedLang = highlighter.getLoadedLanguages().includes(normalizedLanguage) ? normalizedLanguage : "text";
+      if (editor.input.value !== code) {
+        editor.input.value = code;
+      }
+      editor.updateOptions({
+        language: resolvedLang,
+        theme: SHIKI_THEMES[colorScheme],
+        lineNumbers: showLineNumbers ? "on" : "off",
+        readOnly: !editable
+      });
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [code, normalizedLanguage, colorScheme, showLineNumbers, editable]);
+  const fallbackLines = useMemo(() => code.split("\n"), [code]);
+  const fallbackClassName = [
+    "rr-code-lined",
+    showLineNumbers && "rr-code-lined-ln"
+  ].filter(Boolean).join(" ");
+  const bodyClassName = ["rr-code-body", !editable && "rr-code-readonly"].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(CodeBlockCard, { code, language, children: [
+    !loaded && /* @__PURE__ */ jsx("pre", { className: fallbackClassName, children: /* @__PURE__ */ jsx("code", { children: fallbackLines.map((line, i) => /* @__PURE__ */ jsx("span", { className: "line", children: line }, i)) }) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: containerRef,
+        className: bodyClassName,
+        style: !loaded ? { height: 0, overflow: "hidden", visibility: "hidden" } : void 0
+      }
+    )
+  ] });
+};
+const CodeBlockRenderer = ({
+  code,
+  language,
+  showLineNumbers = true
+}) => {
+  const colorScheme = useColorScheme();
+  const normalizedLanguage = normalizeLanguage(language);
+  const [html, setHtml] = useState(null);
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      const highlighter = await getHighlighterWithLang(normalizedLanguage);
+      if (cancelled) return;
+      const loaded = highlighter.getLoadedLanguages();
+      const lang = loaded.includes(normalizedLanguage) ? normalizedLanguage : "text";
+      const result = highlighter.codeToHtml(code, {
+        lang,
+        theme: SHIKI_THEMES[colorScheme]
+      });
+      if (!cancelled) setHtml(result);
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [code, normalizedLanguage, colorScheme]);
+  const fallbackLines = useMemo(() => code.split("\n"), [code]);
+  const linedClassName = [
+    "rr-code-lined",
+    showLineNumbers && "rr-code-lined-ln"
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(CodeBlockCard, { code, language, children: html ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: linedClassName,
+      dangerouslySetInnerHTML: { __html: html }
+    }
+  ) : /* @__PURE__ */ jsx("pre", { className: linedClassName, children: /* @__PURE__ */ jsx("code", { children: fallbackLines.map((line, i) => /* @__PURE__ */ jsx("span", { className: "line", children: line }, i)) }) }) });
+};
+export {
+  CodeBlockEditRenderer,
+  CodeBlockRenderer,
+  CodeBlockRenderer as default
+};

package/dist/rich-renderer-codeblock.css

@@ -0,0 +1,267 @@
+.rr-code-card {
+  --rr-code-accent: #737373;
+  position: relative;
+  margin: 1.5rem 0;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  font-size: 14px;
+}
+.rr-code-lang {
+  position: absolute;
+  bottom: 0.75rem;
+  right: 0.75rem;
+  z-index: 2;
+  font-size: 0.875rem;
+  opacity: 0.6;
+  pointer-events: none;
+}
+.rr-code-copy {
+  appearance: none;
+  position: absolute;
+  right: 0.5rem;
+  top: 0.5rem;
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.375rem;
+  border-radius: 0.375rem;
+  border: 1px solid color-mix(in srgb, var(--rr-code-accent) 5%, transparent);
+  background: color-mix(in srgb, var(--rr-code-accent) 80%, transparent);
+  color: white;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  backdrop-filter: blur(8px);
+}
+.rr-code-card:hover .rr-code-copy {
+  opacity: 1;
+}
+.rr-code-bg {
+  position: relative;
+  background: color-mix(in srgb, var(--rr-code-accent) 5%, transparent);
+  padding: 1rem 0;
+}
+.rr-code-scroll {
+  position: relative;
+  width: 100%;
+  overflow: auto;
+}
+.rr-code-scroll-collapsed {
+  max-height: 50vh;
+  overflow: hidden;
+}
+.rr-code-body {
+  position: relative;
+  overflow: auto;
+  background-color: transparent !important;
+}
+.rr-code-body > .shikicode.output {
+  position: static !important;
+  inset: auto !important;
+}
+.rr-code-readonly > textarea.shikicode {
+  display: none;
+}
+.rr-code-expand-wrap {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  padding: 0.5rem 0 0.75rem;
+  background: linear-gradient(to bottom, transparent 0%, var(--bg, var(--rc-bg-secondary)) 80%);
+  pointer-events: none;
+}
+.rr-code-expand {
+  appearance: none;
+  border: none;
+  background: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+  color: inherit;
+  opacity: 0.7;
+  pointer-events: auto;
+}
+.rr-code-expand:hover {
+  opacity: 1;
+}
+.rr-code-card pre {
+  margin: 0 !important;
+  padding: 0 !important;
+  border-radius: 0;
+  font-size: min(1em, 16px);
+}
+.rr-code-card pre code {
+  display: flex;
+  flex-direction: column;
+}
+.rr-code-card .shiki, .rr-code-card code, .rr-code-card pre {
+  background: transparent !important;
+}
+.rr-code-card .shikicode.output .line::before {
+  background-color: transparent !important;
+}
+.rr-code-card .line {
+  display: block;
+  padding: 0 1.25rem;
+}
+.rr-code-card .shikicode.input.line-numbers {
+  padding-left: calc(5em + 1.25rem);
+}
+.rr-code-card .shikicode.input:not(.line-numbers) {
+  padding-left: 1.25rem;
+}
+.rr-code-card .line > span:last-child {
+  margin-right: 1.25rem;
+}
+.rr-code-card .line::after {
+  content: ' ';
+}
+.rr-code-card .highlighted, .rr-code-card .diff {
+  position: relative;
+  overflow-wrap: break-word;
+}
+.rr-code-card .highlighted::before, .rr-code-card .diff::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 2px;
+}
+.rr-code-card .highlighted {
+  background: color-mix(in srgb, var(--rr-code-accent) 20%, transparent);
+}
+.rr-code-card .highlighted::before {
+  background: var(--rr-code-accent);
+}
+.rr-code-card .diff.add {
+  background: rgba(34, 197, 94, 0.15);
+}
+.rr-code-card .diff.add::before {
+  background: #22c55e;
+}
+.rr-code-card .diff.add::after {
+  content: ' +';
+  position: absolute;
+  left: 0;
+  color: #22c55e;
+}
+.rr-code-card .diff.remove {
+  background: rgba(239, 68, 68, 0.15);
+}
+.rr-code-card .diff.remove::before {
+  background: #ef4444;
+}
+.rr-code-card .diff.remove::after {
+  content: ' -';
+  position: absolute;
+  left: 0;
+  color: #ef4444;
+}
+.rr-code-lined {
+  counter-reset: shiki-line 0;
+}
+.rr-code-lined .line {
+  counter-increment: shiki-line 1;
+}
+.rr-code-lined .line::before {
+  content: counter(shiki-line);
+  color: transparent;
+  text-align: right;
+  box-sizing: border-box;
+  width: 2em;
+  display: inline-block;
+  position: sticky;
+  left: 0;
+}
+.rr-code-lined-ln .line::before {
+  color: inherit;
+  opacity: 0.4;
+  width: 5em;
+  padding-right: 2em;
+}
+.rr-code-scroll pre::-webkit-scrollbar-track {
+  margin-left: 1rem;
+  margin-right: var(--sr-margin, 0);
+}
+.rr-code-scroll pre::-webkit-scrollbar {
+  background-color: transparent !important;
+}
+.rich-code-block {
+  font-family: var(--rc-font-mono);
+  font-size: var(--rc-font-size-small);
+  background-color: var(--rc-code-bg);
+  border-radius: var(--rc-radius-md);
+  overflow: hidden;
+  margin: var(--rc-space-md) 0;
+  border: 1px solid var(--rc-border);
+}
+.rich-code-block pre {
+  margin: 0;
+  padding: var(--rc-space-md);
+  overflow-x: auto;
+}
+.rich-code-block code {
+  font-family: inherit;
+  font-size: inherit;
+  background: none;
+  border: none;
+  padding: 0;
+  color: inherit;
+}
+.rich-code-block-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--rc-space-sm) var(--rc-space-md);
+  border-bottom: 1px solid var(--rc-border);
+  font-size: var(--rc-font-size-small);
+  color: var(--rc-text-secondary);
+  user-select: none;
+}
+.rich-code-block-lang {
+  font-family: var(--rc-font-mono);
+  font-size: 0.85em;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.rich-code-block-copy {
+  appearance: none;
+  border: none;
+  background: none;
+  color: var(--rc-text-secondary);
+  cursor: pointer;
+  padding: var(--rc-space-xs) var(--rc-space-sm);
+  border-radius: var(--rc-radius-sm);
+  font-family: var(--rc-font-family);
+  font-size: var(--rc-font-size-small);
+  line-height: 1;
+  transition: color 0.15s ease, background-color 0.15s ease;
+}
+.rich-code-block-copy:hover {
+  color: var(--rc-text);
+  background-color: var(--rc-bg-secondary);
+}
+.rich-code-block-numbered pre {
+  counter-reset: line;
+}
+.rich-code-block-numbered .line {
+  counter-increment: line;
+}
+.rich-code-block-numbered .line::before {
+  content: counter(line);
+  display: inline-block;
+  width: 2.5em;
+  margin-right: var(--rc-space-md);
+  text-align: right;
+  color: color-mix(in srgb, var(--rc-text-secondary) 40%, transparent);
+  opacity: 0.4;
+  user-select: none;
+  font-size: var(--rc-font-size-small);
+}

package/dist/shiki.d.ts

@@ -0,0 +1,6 @@
+export declare function getHighlighterWithLang(language: string): Promise<any>;
+export declare const SHIKI_THEMES: {
+    readonly light: "github-light";
+    readonly dark: "github-dark";
+};
+//# sourceMappingURL=shiki.d.ts.map

package/dist/shiki.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shiki.d.ts","sourceRoot":"","sources":["../src/shiki.ts"],"names":[],"mappings":"AAcA,wBAAsB,sBAAsB,CAAC,QAAQ,EAAE,MAAM,gBAe5D;AAED,eAAO,MAAM,YAAY;;;CAGf,CAAA"}

package/dist/styles.css.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=styles.css.d.ts.map

package/dist/styles.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../src/styles.css.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@haklex/rich-renderer-codeblock",
+  "version": "0.0.1",
+  "description": "Code block renderer with Shiki syntax highlighting",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./shiki": {
+      "import": "./dist/shiki.mjs",
+      "types": "./dist/shiki.d.ts"
+    },
+    "./constants": {
+      "import": "./dist/constants.mjs",
+      "types": "./dist/constants.d.ts"
+    },
+    "./style.css": "./dist/rich-renderer-codeblock.css"
+  },
+  "main": "./dist/index.mjs",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "lucide-react": "^0.574.0",
+    "shiki": "^3.21.0",
+    "shikicode": "*"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vanilla-extract/css": "^1.17.1",
+    "@vanilla-extract/vite-plugin": "^4.0.20",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "typescript": "^5.9.0",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.0",
+    "@haklex/rich-editor": "0.0.1",
+    "@haklex/rich-style-token": "0.0.1"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": ">=19",
+    "@haklex/rich-style-token": "0.0.1",
+    "@haklex/rich-editor": "0.0.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev:build": "vite build --watch"
+  },
+  "types": "./dist/index.d.ts"
+}