記事の一部でテーマ、マークダウンだけでは装飾できない独自の装飾をしたいと思い、カスタムCSSを追加してみました。
環境
WordPress 5.4
装飾のスクリーンショット
Terminalの出力イメージを表現したかったのです。
背景が黒で、文字が白。
カスタムCSSの設定
サイドメニューの外観 > カスタマイズを選択します。
サイドメニューの追加CSSを選択します。
CSSを追加します。
マークダウンは、HTMLイメージで記入します。
今回はdivタグを使用しました。
マークダウンエディタのWP Githuber MDのプレビューではちゃんと表示されないので、ページのプレビューで確認して下さい。
<div class="console-output">
PHP 5.6.40-29+ubuntu20.04.1+deb.sury.org+1 (cli) Copyright (c) 1997-2016 The PHP Group Zend Engine v2.6.0, Copyright (c) 1998-2016 Zend Technologies with Zend OPcache v7.0.6-dev, Copyright (c) 1999-2016, by Zend Technologies with Xdebug v2.5.5, Copyright (c) 2002-2017, by Derick Rethans</div>
WP Githuber MDのプレビューイメージ
コードのハイライト表示でいいこに気がついた
これだけのことなら、コードのハイライト表示でいいことに気がついてしまった。。。
<pre class="console">
こちらが、ハイライト表示の結果。
PHP 5.6.40-29+ubuntu20.04.1+deb.sury.org+1 (cli) Copyright (c) 1997-2016 The PHP Group Zend Engine v2.6.0, Copyright (c) 1998-2016 Zend Technologies with Zend OPcache v7.0.6-dev, Copyright (c) 1999-2016, by Zend Technologies with Xdebug v2.5.5, Copyright (c) 2002-2017, by Derick Rethans
コメント