Merge pull request #63 from komasandesu/update-codeblock

Update codeblock
komasandesu · Oct 4, 2024 · 4019ff1 · 4019ff1
2 parents bb422f6 + 9d575ae
commit 4019ff1
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 31 deletions.
diff --git a/posts/competitive_programming.mdx b/posts/competitive_programming.mdx
@@ -12,6 +12,7 @@ tags: ['競プロ','C++']
   - 配列の代わりに使ってもいい
 - set
 - unionfind
+  - ACLにある
 - priority queue
   - 主にダイクストラ
 
@@ -24,28 +25,20 @@ tags: ['競プロ','C++']
     ```
 
     のように定義するやつ
-- 回文判定をreverseが一致しているかで行う
-
-    ```cpp
-    str == reverse(str.begin(), str.end());
-    ```
-
+- 回文判定を `reverse` が一致しているかで行う  
 - 素因数分解
 - next_permutation
+- fenwicktree(BIT)
+  - ACLにある
 
 # たまに使う
 
 - セグ木
+  - ACLにある
   - 使い方よくわかってない
 - 多倍長整数
   - Pythonでやった方がいい
-- 切り捨て除算を
-
-    ```cpp
-    A / B - (A % B < 0)
-    ```
-
-    でやる
+- 切り捨て除算を `A / B - (A % B < 0)` でやる
   - 負の数での除算がC++は微妙なので…
 - 進数変換
 - RLE(ランレングス圧縮)
diff --git a/src/components/CodeBlock.tsx b/src/components/CodeBlock.tsx
@@ -3,6 +3,7 @@ import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { atomDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
 import { Button, Tooltip, Box } from "@mui/material";
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import React from "react";
 
 type Props = {
   className?: string;
@@ -12,32 +13,41 @@ type Props = {
 const CodeBlock: React.FC<Props> = ({ className, children = "" }: Props) => {
   const [isCopied, setIsCopied] = useState(false);
 
-  const match = /language-(\w+)(?::(.+))?/.exec(className || "");
+  // childrenがReact要素の場合は、props.childrenから取得
+  const codeContent = React.isValidElement(children)
+    ? children.props.children
+    : children;
+
+  // childrenがReact要素の場合は、props.classNameから取得
+  const codeClassName = React.isValidElement(children)
+    ? children.props.className
+    : className;
+
+  // classNameから言語とファイル名を取得
+  const match = /language-(\w+)(?::(.+))?/.exec(codeClassName || "");
   const language = match && match[1] ? match[1] : "";
   const filename = match && match[2] ? match[2] : "";
-  const code = String(children).replace(/\n$/, "");
 
   const handleCopy = () => {
-    navigator.clipboard.writeText(code).then(() => {
+    navigator.clipboard.writeText(codeContent).then(() => {
       setIsCopied(true);
       setTimeout(() => setIsCopied(false), 2000);
     });
   };
 
   return (
     <Box sx={{ position: "relative", mt: 2, p: 1, borderRadius: "4px", backgroundColor: "#2d2d2d" }}>
-      {filename && (
-        <Box
-          sx={{
-            fontWeight: "bold",
-            color: "#ccc",
-            mb: 1,
-            ml: 1,
-          }}
-        >
-          {filename}
-        </Box>
-      )}
+      {/* 高さを揃えるためのBox */}
+      <Box
+        sx={{
+          fontWeight: "bold",
+          color: "#ccc",
+          mb: 1,
+          ml: 1,
+        }}
+      >
+        {filename || <span>&nbsp;</span>} {/* ファイル名がない場合は空のスペースを表示 */}
+      </Box>
 
       {/* コピーボタンをアイコン形式に変更 */}
       <Tooltip title={isCopied ? "Copied!" : "Copy"}>
@@ -63,7 +73,7 @@ const CodeBlock: React.FC<Props> = ({ className, children = "" }: Props) => {
 
       {/* コード表示 */}
       <SyntaxHighlighter language={language} style={atomDark}>
-        {code}
+        {codeContent}
       </SyntaxHighlighter>
     </Box>
   );

diff --git a/src/pages/blog/[slug].tsx b/src/pages/blog/[slug].tsx
@@ -71,9 +71,24 @@ const components = (file_name: string) => ({
   Button,
   SyntaxHighlighter,
   Math,
-  code: (props: JSX.IntrinsicAttributes & { children?: ReactNode; className?: string }) => (
+  pre: (props: JSX.IntrinsicAttributes & { children?: ReactNode; className?: string }) => (
     <CodeBlock {...props} />
   ),
+  // インラインコード用に code を使用
+  code: (props: JSX.IntrinsicAttributes & { children?: ReactNode }) => (
+    <Typography
+      component="code"
+      sx={{
+        backgroundColor: 'rgba(27,31,35,0.05)',
+        fontFamily: 'Menlo, Monaco, Consolas, "Courier New", monospace',
+        padding: '0.2em 0.4em',
+        borderRadius: '3px',
+        fontSize: '85%',
+      }}
+    >
+      {props.children}
+    </Typography>
+  ),
   Tweet: ({ id, url }: { id?: string; url?: string }) => {
     // IDまたはURLのいずれかが指定されている場合に対応
     const tweetId = id || (url ? extractTweetId(url) : undefined);
@@ -229,7 +244,7 @@ const getStaticProps = async ({ params: { slug } }: StaticProps) => {
   const headingList: { id: string, text: string, level: number }[] = [];
   const mdxSource = await serialize(content, {
     mdxOptions: {
-      remarkPlugins: [remarkMath],
+
       rehypePlugins: [
         rehypeSlug,
         [rehypeHeadingLinks, headingList],