wordpress

スタイリッシュにソースコードをブログ記事に載せたい

このブログはwordpressのTwenty elevenをカスタマイズして使っています。wordpress初心者の私にとって、プラグインは魔法の小道具。プラグインの追加・有効化をするたびに、カスタマイズ欲を満たしてくれます。同じwordpress初心者の方の参考になれば嬉しいし、健忘録的に記録として残していくという意味合いも兼ねて、追加したプラグインのレビューやcssのコードなどを記事にしていこうと思っています。

さて。今日追加したプラグイン、SyntaxHighlighter Evolvedについて、手順を追って書いていきます。

SyntaxHighlighter Evolvedを入手する

以下のリンクから入手するか、wordpressの管理画面からSyntaxHighlighter Evolvedを検索・追加します。
http://wordpress.org/extend/plugins/syntaxhighlighter/

私は管理画面からSyntaxHighlighter Evolvedを追加しました。
次の手順でインストールできました。

インストールの手順

  • 1.SyntaxHighlighter Evolvedと入力して「プラグインの検索」
  • 2.SyntaxHighlighter Evolved を 「いますぐインストール」
  • 3.本当にこのプラグインをインストールしてもいいですか? → OK
  • 4.プラグインを有効化
  • 5.設定→SyntaxHighlighterを選択する
  • 6.テーマを選択する

では順に書いていきます。

1.SyntaxHighlighter Evolvedと入力して「プラグインの検索」ボタンを押す
SyntaxHighlighterEvolved01

2.SyntaxHighlighter Evolved を 「いますぐインストール」する
SyntaxHighlighterEvolved02

3.本当にこのプラグインをインストールしてもいいですか? → OK

4.プラグインを有効化
SyntaxHighlighterEvolved03

5.設定→SyntaxHighlighterを選択する

6.テーマを選択する

SyntaxHighlighter Evolvedには、デフォルトテーマ以外にも複数のテーマが備えられています。

【Default】
SyntaxHighlighterEvolved04

【Django】
SyntaxHighlighterEvolved05

【Eclise】
SyntaxHighlighterEvolved06

【RDark】
SyntaxHighlighterEvolved07

SyntaxHighlighter Evolvedの使用例

ex)文字を黄色のバックグラウンドカラーで強調したい。

【cssコード】

em{
margin-left:0.5em;
font-style:normal;
color:#00000;
background-color:#ffcc00;
}

ぜひ試してみてくださいね。


スポンサードリンク

関連記事

●このブログの運営者


Willkinokoです。大阪在住の会社役員。バツ1、子持ちのアラフォーです。趣味はブログの運営と体を動かすこと。日々、自分の生活に目を向け、感じたことをブログに綴っていきたいと思っています。 詳しく見る

●ブログ検索

ページ上部へ戻る