HTMLコードの勉強をしていると、ソースコードをサイト内に表示しているものをよく見かけます。
あれはどうやって表示しているのでしょうか？
自分でもできたので共有します。
下記サイトで勉強しました↓↓
WordPressでhtml等のコードエディタを埋め込む方法について | 非公認ウォーサバ攻略 肉CITY工房
完成イメージはどういうもの？
先に結論から見せると、下記のような「コードエディタを表示」させてみたかったのです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
Hello World！
</body>
</html>
これを表示するまでの手順を説明します。
WordPressプラグインをインストール
プラグイン「Enlighter – Customizable Syntax Highlighter」をインストール。
「使用中のWordPressバージョンで未検証」というのは気になりましたが、
有効インストール数を見て、信頼できると判断し、インストールしました。
使い方
プラグインを有効化すると、投稿編集ページの「ブロック」の選択肢に、「Enlighter Sourcecode」が出現します。
「Enlighter Sourcecode」をクリックして、言語を指定し、サンプルコードを入力すると、思い描いたコードエディタが表示されます。
カラーなどをカスタマイズ
プラグインの「Setting」から「Appearance」の画面へ進むと、表示テーマを自由に選択できます。
デフォルトは「Enlighter」です。
テーマは全部で、14種類から選択できるようです。
私は背景が黒画面のほうが好みなので、「Dracula」「Monokai」が好きでした。
結局選んだのは、「Monokai」です。
コメント