タイトルの通り、新リッチエディタに対応しました
これで段落分けされてなくて読みづらいHTMLから開放されました…
デザインは変わってないです
コードブロック
ついにコードブロックにファイル名と言語を追加できるようになりました！
新リッチエディタを使いたかった理由の1つではあったので、これができるようになっただけで嬉しいですね
ハイライトシンタックスには前回の記事でも書いた通りShikiを使い始めたんですが、Shikiにプログラミング言語を渡していい感じにハイライトしてくれるようになったのでめっちゃ見やすくなりました
ファイル名も表示できるようになったので、実際にmicroCMSから渡されたテキストをコードブロックに変換してファイル名を表示するための処理をお見せしてみようかなと思います
src/pages/[category]/[post].astro
const promise: any = []
const $ = load(post.old_content ?? post.content)
$("pre").each(function (this: cheerio.Element) {
const element = $(this)
const fileName = element.parent().attr("data-filename")
const fileNameElement = `<div class="c-post__fileName">${fileName}</div>`
element.before(fileNameElement)
element.parent().addClass("c-post__code")
const lang = element.find("code")?.attr("class")?.replace("language-", "")
const code = codeToHtml(element.text(), {
lang: lang ?? "plaintext",
theme: "dark-plus",
transformers: [addCopyButton({ toggle: 3000 })],
}).then((highlight) => {
element.replaceWith(highlight)
})
promise.push(code)
})
await Promise.all(promise)
const formattedContent = $.html()こんな感じで、cheerioでstringからcheerioのelementに変換して、親からファイル名をもらい pre の前にファイル名を表示するための div を配置
そして子要素の code のクラス名から言語名を取得してshikiの codeToHtml に渡してハイライトしてもらってます
あとは codeToHtml は非同期で呼び出す必要があるので、 Promise.all に渡して処理してもらう形になってます
コードブロック、見やすくてサイコ～
その他
その他に対応したことは特にないです
旧リッチエディタのコンテンツは old_content として新リッチエディタに移行せず残しています
別に大した記事の量ではないので簡単に移行はできますが、またいつかやります
まだまだIssueはあるのでこれから対応していこうと思います
Share!