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

  1. WordPress
  2. 435 view

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

最終更新日:2018/12/01
wp-markdown-customize

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の設定に関する記事が沢山あるので、是非覗いていってください。

それでは!

The following two tabs change content below.
WINDII

WINDII

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

WordPressの最近記事

  1. WordPressをお試しで始める方法【5分できてなんと無料】

  2. WordPressで吹き出しを実装する【10分】

  3. WordPressでカテゴリーの並べ替えをする方法【3分で完了します】

  4. 現役エンジニアの選ぶWordPressの使いやすいテーマ9選【綺麗・使いやすい】

  5. WordPressの運用で行なっている事まとめ【プログラミング知識不要】

関連記事

コメント

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

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

PAGE TOP