職業訓練校でCSS/HTMLの授業がはじまりました。
教科書に印刷されているコードを見ながらエディターに入力していますが、
写すことに夢中で先生が話していることが頭に入っていかなかったり、
なぜこういうコードの書き方をするのか疑問に思ってもどんどん次へと進んでしまうので、
帰宅してからコードの参考サイトを調べる機会がたくさんあります。
そんなさまざまなコードの書き方を自分用に必要だと思う部分だけ整理して備忘録として
残していこうと思ったので、Wordpressにコード埋め込み用プラグインを試してみることにしました。
プラグインは評判の良さそうな「Highlighting Code Block」を導入してみます。
Highlighting Code Blockの導入方法
基本的にWordPressプラグインのインストール手順はとってもカンタン。
左側のメニューから「プラグイン」→「新規追加」をクリック。
プラグインを検索
プラグインの新規追加画面に移動したら、右上検索枠の入力欄から
「Highlighting Code Block」とプラグイン名を検索します。
プラグインをインストール＆有効化
プラグインが見つかったら、「今すぐインストール」を押してインストールを開始しましょう。
インストールが終わったら「有効化」を忘れずに！
これでHighlighting Code Blockの導入は完了しました！ここまではめちゃくちゃ簡単です！
Highlighting Code Blockの使い方
導入ができたら次はいよいよHighlighting Code Blockを使って
WordPress記事内にソースコードを埋め込んでいきます。
まずは投稿ページでも固定ページでも構いませんのでエディタ画面を開きます。
すると下画像のようにブロックエディタのプラスマークをクリックすると
「Highlighting Code Block」と書かれたメニューが表示されるようになっています。
選択するとコードが書けるようになっています。
ソースコードとして埋め込みたいプログラミング言語を選択しましょう。
<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>
これでソースコードの埋め込み用プラグインが無事導入できました！
設定項目も「コードカラーリング」や「フォントサイズ」などいろいろ好みに
カスタマイズできるようですのでいろいろ触っていきながら慣れていきたいと思います。
まとめ
外部サービスのコード埋め込みエディタもあるようですが、新たにアカウントを作成して登録したりせずにwordpree内のプラグインとしてダウンロードするだけなのでとても簡単でした。
シンプルな使い心地で表示も綺麗なので、WordPressの記事内にサンプルコードを挿入するなら、とても使いやすいと思います。技術系の記事は勉強中ですのでもしかすると間違っていることもあるかもしれませんがこれから頑張って学んでいきますのでよろしくお願いいたします。