技術記事やフリーランス記事をメインに情報公開をしています。是非見ていってください。

  1. WordPress

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

最終更新日:2018/12/01

wp-markdown-customize

はじめに

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

以前書いた記事

整形前のコード

Markdownカスタマイズの目標

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

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

  1. WP Code Highlight.jsをインストールして有効化。
  2. WP Code Highlight.jsでテーマの選択、適用。
  3. 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の設定に関する記事が沢山あるので、是非覗いていってください。

それでは!

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。