kutc-logo

近畿大学工業高等専門学校プログラミング技術部

コードタグの実装

2025/02/24

コードタグを実装しました🎉

コードタグの実装

MicroCMSから受け取ったHTML文字列をElementに変換し、コードタグのシンタックスハイライトを追加しました。

page.tsx
1//省略
2
3const parsedContent = parser(content.content, {
4    replace: (domNode) => {
5      const dom = domNode as CmsElement
6      if (dom.tagName !== 'pre') return domNode
7      const codeTag = dom.children[0] as CmsElement
8      const code = (codeTag.children[0] as CmsElement).data
9      const language = codeTag.attribs.class.replace('language-', '')
10      const parentTag = dom.parent as CmsElement
11      let _fileName: string | null = null
12      if (parentTag !== null) {
13        const fileNameAttribute = parentTag.attributes.find((attr) => attr.name === 'data-filename')
14        if (fileNameAttribute) _fileName = fileNameAttribute.value
15      }
16      return (
17        <div className={styles.codeContainer}>
18          {_fileName ? (
19            <div className={styles.fileNameContainer}>
20              <span className={styles.fileName}>{_fileName}</span>
21            </div>
22          ) : null}
23          <div className={styles.code}>
24            <SyntaxHighlighter language={language} style={monokai} showLineNumbers>
25              {/* TODO この文字列の長さで来ると全然バグる */}
26              {code}
27            </SyntaxHighlighter>
28          </div>
29        </div>
30      )
31    },
32  })
33
34//省略