docusaurus機能を実装する

導入
今週、私は静的サイトジェネレータ(SSG)に取り組んでいます.
私は新しいツールを紹介しました.これは、サポートコンポーネント、テーマ、プラグイン、マルクダウンサポートなどのウェブサイトを実装するために使用することができますいくつかの有用な機能があります.Docusaurusアプリをダウンロードして、私自身でそれを公開しようとすると、機能を探求した.それは面白かったです、あなたは私のPotato Generatorを見てみることができます.
私は私のSSGに実装するコードブロックの構文強調表示を選んだ.多くのプログラマにとって、すべてのプログラマが自分のドキュメントのコードブロックを持っているので、SSGにこの機能を持つ必要があります.
Docusaurus Demo Website
プロセス
私は解決する2つの問題にタスクを分解:コードブロックのコードブロックとスタイルを識別します.
コードブロックを特定するために、私はHTMLファイルに出力を書くとき、コードブロックの外観に注意するコードを書きました.コードブロックのオープン構文があるたびに、コードブロックの閉じた構文をDIVコンテナに見つけるまで、次のコードを実行します.
これは、コードブロックを識別した後の結果です.

その後、divコンテナのスタイルを変更し、黒の背景、通常のフォントと白いテキストを持つ.それはコードブロックのように似ています.
スタイルの変更後の結果はこちらです.

コードブロックが入力されるたびに、次の形式でHTMLにエクスポートされます.

<div style='background-color: black; color: white;'>

<p style='font-family:Consolas;'> int main(){</p>
<p style='font-family:Consolas;'> cout << "Hello World";</p>
<p style='font-family:Consolas;'> }</p> 

</div>

結論
全体的に、このような便利な機能を実装することに興味がありました.私は将来的にこのようなより有用な機能を持つ私のSSGを改善したいと思います.
SSGの新しいコード・ブロック機能の私の を見てください.