Merge pull request #26 from ut-code/codeblock-style

コードブロックのフォントや見た目をエディター・ターミナルに合わせる

Author: na-trium-144

README.md

@@ -83,10 +83,13 @@ npm run lint
 
 - [Next.js](https://nextjs.org/docs)
     - 検索する際は「App Router」を含めることで古い記事に惑わされることが少なくなります。
+- [OpenNext](https://opennext.js.org/cloudflare)
 - [DaisyUI](https://daisyui.com/docs/use/) / [Tailwind CSS](https://tailwindcss.com/docs)
     - buttonやinputやメニューなどの基本的なコンポーネントのデザインはDaisyUIにあるものを使うと楽です
     - 細かくスタイルを調整したい場合はTailwind CSSを使います (CSS直接指定(`style={{...}}`)よりもちょっと楽に書ける)
     - よくわからなかったらstyle直接指定でも良い
+- [SWR](https://swr.vercel.app/ja)
 - [react-markdown](https://www.npmjs.com/package/react-markdown)
-    - オプションがいろいろあり、今はほぼデフォルト設定で突っ込んでいるがあとでなんとかする
-- [OpenNext](https://opennext.js.org/cloudflare)
+- REPL・実行結果表示: [xterm.js](https://xtermjs.org/)
+- コードエディター: [react-ace](https://github.com/securingsincity/react-ace)
+- それ以外のコードブロック: [react-syntax-highlighter](https://github.com/react-syntax-highlighter/react-syntax-highlighter)

app/[docs_id]/markdown.tsx

@@ -1,10 +1,11 @@
 import Markdown, { Components } from "react-markdown";
 import remarkGfm from "remark-gfm";
-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import SyntaxHighlighter from "react-syntax-highlighter";
 import { PythonEmbeddedTerminal } from "../terminal/python/embedded";
 import { Heading } from "./section";
 import { AceLang, EditorComponent } from "../terminal/editor";
 import { ExecFile, ExecLang } from "../terminal/exec";
+import { tomorrow } from "react-syntax-highlighter/dist/esm/styles/hljs";
 
 export function StyledMarkdown({ content }: { content: string }) {
   return (
@@ -138,8 +139,8 @@ const components: Components = {
         <SyntaxHighlighter
           language={match[1]}
           PreTag="div"
-          className="border border-base-300 mx-2 my-2 rounded-lg text-sm! m-2! p-4!"
-          // style={todo dark theme?}
+          className="border border-base-content/50 mx-2 my-2 rounded-lg text-sm p-4!"
+          style={tomorrow} // todo dark theme (editor.tsx で指定したのと同じテーマを選ぶようにすること)
           {...props}
         >
           {String(props.children || "").replace(/\n$/, "")}
@@ -150,8 +151,8 @@ const components: Components = {
       return (
         <SyntaxHighlighter
           PreTag="div"
-          className="border border-base-300 mx-2 my-2 rounded-lg text-sm! m-2! p-4!"
-          // style={todo dark theme?}
+          className="border border-base-content/50 mx-2 my-2 rounded-lg text-sm p-4!"
+          style={tomorrow} // todo dark theme
           {...props}
         >
           {String(props.children || "").replace(/\n$/, "")}

app/globals.css

@@ -1,20 +1,7 @@
 @import "tailwindcss";
 @plugin "daisyui";
 
-/* inconsolata-latin-wght-normal */
-@font-face {
-  font-family: "Inconsolata Variable";
-  font-style: normal;
-  font-display: swap;
-  font-weight: 200 900;
-  src: url(https://cdn.jsdelivr.net/fontsource/fonts/inconsolata:vf@latest/latin-wght-normal.woff2)
-    format("woff2-variations");
-  unicode-range:
-    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
-    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
-    U+2215, U+FEFF, U+FFFD;
-}
-
+/* CDNからダウンロードするURLを指定したらなんかエラー出るので、npmでインストールしてlayout.tsxでimportすることにした */
 @theme {
-  --font-mono: "Inconsolata Variable", monospace;
+  --font-mono: "Inconsolata Variable", "Noto Sans JP Variable", monospace;
 }

app/layout.tsx

@@ -1,4 +1,6 @@
 import type { Metadata } from "next";
+import "@fontsource-variable/noto-sans-jp";
+import "@fontsource-variable/inconsolata";
 import "./globals.css";
 import { Navbar } from "./navbar";
 import { Sidebar } from "./sidebar";

app/terminal/editor.tsx

@@ -87,7 +87,7 @@ export function EditorComponent(props: EditorProps) {
       <AceEditor
         name={`ace-editor-${props.filename}`}
         mode={props.language}
-        theme="tomorrow" // TODO dark theme
+        theme="tomorrow" // TODO dark theme (twilightがいいんじゃないかと勝手に思っている)
         tabSize={props.tabSize}
         width="100%"
         height={

app/terminal/terminal.tsx

@@ -71,19 +71,9 @@ export function useTerminal(props: TerminalProps) {
   useEffect(() => {
     const abortController = new AbortController();
 
-    (async () => {
-      // globals.cssでフォントを指定し読み込んでいるが、
-      // それが読み込まれる前にterminalを初期化してしまうとバグる。
-      // なのでここでフォントをfetchし成功するまでterminalの初期化は待つ
-      try {
-        await fetch(
-          "https://cdn.jsdelivr.net/fontsource/fonts/inconsolata:vf@latest/latin-wght-normal.woff2",
-          { signal: abortController.signal }
-        );
-      } catch {
-        // ignore
-      }
-
+    // globals.cssでフォントを指定し読み込んでいるが、
+    // それが読み込まれる前にterminalを初期化してしまうとバグる。
+    document.fonts.load("0.875rem Inconsolata Variable").then(() => {
       if (!abortController.signal.aborted) {
         const fromCSS = (varName: string) =>
           window.getComputedStyle(document.body).getPropertyValue(varName);
@@ -96,7 +86,7 @@ export function useTerminal(props: TerminalProps) {
           fontSize: 14,
           lineHeight: 1.4,
           letterSpacing: 0,
-          fontFamily: "Inconsolata Variable",
+          fontFamily: "'Inconsolata Variable','Noto Sans JP Variable'",
           theme: {
             // DaisyUIの変数を使用してテーマを設定している
             // TODO: ダークテーマ/ライトテーマを切り替えたときに再設定する?
@@ -134,7 +124,7 @@ export function useTerminal(props: TerminalProps) {
         setTermReady(true);
         onReadyRef.current?.();
       }
-    })();
+    });
 
     const observer = new ResizeObserver(() => {
       // fitAddon.fit();

package-lock.json

@@ -14,6 +14,8 @@
     "cf-typegen": "wrangler types --env-interface CloudflareEnv cloudflare-env.d.ts"
   },
   "dependencies": {
+    "@fontsource-variable/inconsolata": "^5.2.6",
+    "@fontsource-variable/noto-sans-jp": "^5.2.6",
     "@google/generative-ai": "^0.24.1",
     "@opennextjs/cloudflare": "^1.6.3",
     "@xterm/addon-fit": "^0.11.0-beta.115",