【メモ】【WordPress】Qiitaのシンタックスハイライトライブラリに合わせてみた。スマートでかっこいいよ。satorikublogsatorikublogサトリクのこだわりのモノ紹介ホームメモ【メモ】【WordPress】Qiitaのシンタックスハイライトライブラリに合わせてみた。スマートでかっこいいよ。6分SHAREツイートシェアはてブLINEPocketサトリクどうも、サトリクです。ソースコードをQiita風に書けるような設定ができたので、皆さんに共有します。WordPressのテーマ『SANGO』のデフォルトのソースコードでは、色分け(シンタックスハイライト)がされていないのです。サトリクこんな感じです。現実やっぱり、ソースコードだったら色分けが欲しいですよね。一応、SANGOのデフォルトでも自分で1つ1つ色を変えることはできるのですが、かなりめんどくさいですよね。かっこいいソースコードを見てみようと、色々なブログのソースコードボックスを見ましたが、やはり、Qiitaのソースコードボックスが見慣れてるし見やすいですよね。サトリクそこで、Qiitaをモデルにしてソースコードボックスを作成してみることにしました。この記事では、これにできるだけ近づける方法をご紹介します。:SANGO※テーマ次第でできない可能性ありQiitaのソースコードボックスに近づける方法テーマSANGOでは、デフォルトでソースコードボックスが付いていますが、これは、もう使いません。新たにプラグインで上書きします。そのため、今までのソースコードボックスのレイアウトが崩れる可能性がありますので、気をよく考えましょう。サトリクまぁ、プラグインを無効化すればすぐに戻せますが、、、プラグインインストールまずは、ソースコードボックスのプラグインを追加します。Highlighterと検索して以下のプラグインをインストール、有効化してください。Highlighterの設定画面を開きます。以下のように、設定を変更してください。サトリクバージョンなどの違いで項目が違う場合があります。何もしないまずは、この設定をしてください。次に、ソースコードボックスのテーマ『Monokai』を元にQiitaに近づけていきます。Highlighterのテーマ編集STEP.1テーマをコピーまずは、テーマMonokaiをコピーします。Duplicateをクリックしてください。STEP.2名前をつける僕は、Qiita-ish(Qiita風)と名前をつけました。STEP.3Editテーマが『Qiita-ish』になっていることを確認して、Editをクリックしてください。STEP.4テーマ編集この画面で色々と編集していきます。STEP.5背景をQiitaと同じ色に設定ソースコードボックスの背景を変更します。上のBackgroundを#364549に変更してください。上だけでいいですが、僕は念為全てのbackgroundを変えています。STEP.6枠線削除ソースコードボックスの枠線はいらないので、削除しましょう。以下のように、全て空白にしてnoneを選択しましょう。STEP.7フォントカラーを揃えるこれでだいたいQiita風になったのですが、フォントの色が少し違います。僕も全て揃えようとしたのですが、完璧にQiitaと一緒にすることはできなかったので、だいたい合わせました。STEP.8レイアウト崩れを修正この設定をすると、タイトルとコードの間に隙間ができてしまうので、以下のコードをCSSに貼り付けてください。title="HTML"]<pre>ソースコード</pre>[/codebox]こんな感じで書きます。まとめみなさんできましたでしょうか。他にもこのような、WordPressのちょっとしたカスタマイズの記事を書いているので、ぜひ呼んでください。コメントをキャンセルメールアドレスが公開されることはありません。サトリク21歳のエンジニアです。仕事終わってから1人で淡々とブログを書いています。目標は、このブログを自慢できるほどのコンテンツに仕上げることです。自分が買ったモノの紹介はこちらのブログで紹介しています。