Stoic Sounds 元はExtroseが運営する個人サイト名

プロフィール

顔写真(V)

Extrose
2002年頃から電脳海にいる。 制作ペースは激減したものの今でも現役の作曲者(自称)であり、機会があればBMSも作る。 が、最近はVを被ってゲーム実況に勤しんでいる。 興味があるものになんでも手を出すのでかなりの趣味を抱えている。

柊 雷夜
ユーチューブ地方で見かけるVのすがた (↑)。 たまに VRChat にも出る。 VRoid Studio 製。

リリース

個人活動

読み物

[JavaScript] Markdown形式をそのまま Webページとして表示する

戻る > エンジニア - Web開発
関連：[JavaScript] Markdown形式をそのまま Webページとして表示する
関連：[JavaScript] marked.js のコードブロックに色付けする
関連：[JavaScript/Node.js] marked のコードブロックを Prism でプリレンダする

概要

Webサイトの作成には HTML が必須である
Wordpress とかもいろいろあるが、結局は自分の手でやりたいというのがエンジニアの性である
・・・と思っている

しかし、HTMLを触っていくと、タグ打つのは面倒だし、
私なんかのようにサイトを何度も改装していると、サイトデザインに併せて書き換えするのも面倒になってくる

そこで標準化するために Markdown 書式をHTML出力とすることで、今後の改装にも対応できるようにする と考えた
もちろん、改装都度思想は変わるので、結局書き換えは必要かもしれないが・・・

実装

// CDNからインポート
import { marked } from 'https://cdn.jsdelivr.net/npm/marked/lib/marked.esm.js';

// Markdown形式の文字列
markdownText = "markdown texts...";

// id="html_markdown" となっている箇所に反映
document.getElementById('html_markdown').innerHTML = marked(markdownText)

たったこれだけである
markdownText としているところには文字列が入ればいいので、当然ファイルからインポートにすれば編集の利便性は高くなる

fetch を使った例は下記の通り 

// Markdown形式の文字列 を ファイル「document.md」のものに
markdownText = await fetch(`/path/to/document.md`).then(res => res.text());

後はURLのクエリとかで読み込むファイルを変えれば、それで markdown 形式で編集できるwebサイトの完成である

問題点

この形式の問題点は、ページ読み込み時にちらつくこと
このサイト(2025/5/18時点) がちょうどそうである
なので、そこに何らかの工夫は必要となる