【超簡単】WordPressのソースコードを綺麗に表示する方法

WordPress
1243 view

【超簡単】WordPressのソースコードを綺麗に表示する方法

最終更新日:2018/12/01

wp-markdown-customize 。

はじめに
Markdownカスタマイズの目標
Markdownカスタマイズの作業内容
早速カスタマイズしていきましょう。
まとめ
- - WINDII
  - 最新記事 by WINDII (全て見る)

はじめに

以前WordPressでMarkdown対応を行ったのですが、ソースコードがあまり美しく表示されなかったのでカスタマイズをしました。
驚く程簡単で、便利なので記事にしようと思った次第であります。

以前書いた記事

WordPressで記事の執筆速度を抜群に上げる方法【Markdown対応】

今回、新たに当ブログをWordPressで構築したのですが、今後記事を書いていく上で流石にMarkdownが使えないのはありえない！！と思い早速Markdown対応を行いました。Markdownって何？気軽に文章を記述できるチートです。例えば#+半角スペースでh1タグが生成されます...

整形前のコード

Markdownカスタマイズの目標

・シンタックスハイライトをつける
・かっこいい黒背景
・自分好みのデザイン

Markdownカスタマイズの作業内容

WP Code Highlight.jsをインストールして有効化。
WP Code Highlight.jsでテーマの選択、適用。
CSSカスタマイズ。

早速カスタマイズしていきましょう。

まずはWP Code Highlight.jsをインストールして有効化をします

なんと一瞬で、シンタックスハイライトが出てきました！！
おめでとうございます。

次はWP Code Highlight.jsの設定より、Color Schemeを選定します。

多様なColor Schemeがあるのですが、参考にしたMarkdownでキレイなソースコードが書ける環境をWordPress上に作るさんがagateを選択していたので便乗させて頂きました。

おー！！なんとも美しいですね。

あとは、CSSでカスタマイズをするだけです。

preタグの部分のデザインが浮くことが多いようです。
このブログではjetpackのmarkdownを使用しているので、以下のコードが意地悪？をしていました。

.post_content pre {
border-left: 5px solid #7fc120;
font-size: 12px;
margin: 0 0 27px 0;
line-height: 25px;
background: url(img/common/pre.gif) repeat left top;
padding: 0 17px;
overflow: auto;
}

これを、カスタマイズします。

.post_content pre {
font-size: 12px;
margin: 0 0 27px 0;
line-height: 25px;
padding: 0 17px;
overflow: auto;
border-radius:3px;
}

ボーダーラディウスをつけたのは角が尖っていると女性が傷ついてしまうと聞いた事があるからです。

曲がる！！曲がってくれオレのハチロク！！

多分今このサイトで使っているような感じになります！2018/07/07

まとめ

WP Code Highlight.jsを使用する事で、簡単にシンタックスハイライトを適用し、ソースコード部分が綺麗に表示する事が出来ました。
他にも、当ブログでは色々なWordPressの設定に関する記事が沢山あるので、是非覗いていってください。

それでは！

この記事を書いた人
最新の記事

WINDII

WINDII（ウィンディ）は、フリーランスエンジニアが運営するテックメディアです。日々の業務で得た知見を、皆さんに役立つコンテンツにして発信していくので応援よろしくお願いします！また、Slackで無料コミュニティも運営しています。たくさんのエンジニアが参加していて、プログラミングの相談や雑談などをしている楽しいコミュニティなので、興味ある方はぜひお気軽にご参加ください。 Slackコミュニティはこちらから

現役フリーランスエンジニアが運営するテックメディア。日々の業務で得た知識を発信していきます！

WINDIIテック