シンタックスハイライトについては、Prism を用いて実装しています。
Note
今後の開発予定からの実装です。
概要
Prism を用いて markdown-it のカスタムプラグインを作る形で実装しています。
import { LANG_FOR_HIGHLIGHT } from "@/config/code-language";
import MarkdownIt from "markdown-it";
import Prism from "prismjs";
import loadLanguages from "prismjs/components/index.js"; // 必要な言語を動的に読み込む
loadLanguages(LANG_FOR_HIGHLIGHT);
const markdownItHighlight = (md: MarkdownIt) => {
md.renderer.rules.fence = (tokens, idx, options, env, self) => {
const token = tokens[idx];
const code = token.content.trim();
const lang = token.info?.trim() || "";
let highlighted = code;
if (lang && Prism.languages[lang]) {
highlighted = Prism.highlight(code, Prism.languages[lang], lang);
}
const langClass = lang ? `language-${lang}` : "";
return `<pre class="${langClass}"><code class="${langClass}">${highlighted}</code></pre>`;
};
};
export default markdownItHighlight;
スタイルや対応言語は Prism から選んだりして、好きにカスタマイズしたりしてください。
対応言語については、スタイルのインポートのほかに ./src/config/code-language.ts の LANG_FOR_HIGHLIGHT も変更してください。
export const LANG_FOR_HIGHLIGHT: string[] = [
// もともとの言語
"markup",
"css",
"clike",
"javascript",
// 追加
"bash",
"c",
"csharp",
"cpp",
"go",
"json",
"php",
"python",
"jsx",
"tsx",
"ruby",
"rust",
"sql",
"typescript",
];
最後に、いくつか変換例を置いておきます。
JavaScript
const greet = (name) => {
return `Hello, ${name}!`;
};
console.log(greet("World"));
クラス
class User {
constructor(name) {
this.name = name;
}
sayHi() {
console.log(`Hi! I'm ${this.name}.`);
}
}
const u = new User("Alice");
u.sayHi();
非同期処理
async function fetchData() {
const res = await fetch("/api/data");
const json = await res.json();
console.log(json);
}
fetchData();
TypeScript
type User = {
id: number;
name: string;
};
function createUser(user: User): User {
return { ...user, id: Date.now() };
}
const newUser = createUser({ id: 0, name: "Alice" });
console.log(newUser);
Python
def add(a, b):
return a + b
print(add(3, 5))
class Animal:
def __init__(self, name):
self.name = name
def speak(self):
print(f"{self.name} makes a sound")
dog = Animal("Dog")
dog.speak()
squares = [i * i for i in range(10)]
print(squares)
Shell / Bash
#!/bin/bash
for i in 1 2 3; do
echo "Count: $i"
done
if [ -f "./config.json" ]; then
echo "Config found."
else
echo "Config missing."
fi
JSON
{
"name": "sample-project",
"version": "1.0.0",
"scripts": {
"dev": "next dev",
"build": "next build"
}
}
PHP
<?php
function greet($name) {
return "Hello, $name!";
}
echo greet("World");
Rust
fn main() {
let nums = vec![1, 2, 3];
for n in nums {
println!("Number: {}", n);
}
}
Go
package main
import "fmt"
func main() {
for i := 1; i <= 3; i++ {
fmt.Println("Count:", i)
}
}
C++
#include <iostream>
using namespace std;
int main() {
for (int i = 0; i < 5; i++) {
cout << "i = " << i << endl;
}
}
CSS
.container {
display: flex;
gap: 1rem;
}
.card {
padding: 1rem;
border-radius: 8px;
background: #222;
color: white;
}
HTML
<div class="card">
<h1>Hello World</h1>
<p>This is a sample.</p>
</div>