Tech系ブログには欠かせないソースコードの説明。Tech系のブログでよく見かける綺麗にソースコードを表示できるWordPressプラグインCrayon Syntax Highlighter。

まずはブログ内の表示を見てみましょう。

ブログ内の見栄え

WordPressに普通にソースコードを投稿するとこんな感じの見栄えになります。

通常表示

/* 中見出し */
h2 { 
  background: #f3f3f3;
  color: #1a1a1a;
  font-size: 19px;
  line-height: 27px;
  margin: 20px 0;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  border-top:2px solid #ccc;
  border-bottom:1px solid #ccc;
}

なんかダサいですよね。これをCrayon Syntax Highlighterプラグインを使ってブログ内に綺麗にソースコードを表示するとこんな感じなります。

Crayon Syntax Highlighterプラグインを使った表示

Crayon Syntax Highlighterの使い方

WordPressのダッシュボードからプラグイン 新規追加 → Crayon Syntax Highlighterを検索してインストール。

エデュターがビジュアルになっている場合はテキストに変更します。テキストに変更すると〇〇にcrayonが表示されているのでcrayonをクリックします。

Crayon Syntax Highlighter編集画面

Crayon Syntax Highlighterプラグインを使って一歩Tech系ブログに近づいてみましょう。

Crayon Syntax Highlighter

この記事が気に入ったら
フォローしよう

最新情報をお届けします

おすすめの記事