[ワードプレス]ブログにソースコードを載せるときに超便利な「SyntaxHighlighter Evolved」

2017/9/8 2018/1/9 ブログ運営

ワードプレスで、ブログにソースコードを載せたいとき、

<html>
<head>
<title>Hello world !</title>
</head>
<body>
Hello world !
</body>
</html>

だと、いまいちなので、

<html>
<head>
<title>Hello world !</title>
</head>
<body>
Hello world !
</body>
</html>

この方が、かっこいいですよね？これは「SyntaxHighlighter Evolved」というプラグインを使っています。

プラグインをインストールしてみましょう

ワードプレスのダッシュボードで、

「プラグイン」→「新規追加」

をクリックし、右上の「キーワード」のところに「SyntaxHighlighter Evolved」を入力して検索してください。

すぐに、「SyntaxHighlighter Evolved」が出てきますので、今すぐインストールをクリック。

そのあとプラグインを有効化することも忘れないでくださいね。

設定

ダッシュボードの「設定」の中に、「SyntaxHighlighter Evolved」があるはずなので、クリック。

設定画面は、こんな感じですが、まずは何もさわらなくてＯＫです。

設定画面の下のほうに、「変更を保存」というボタンがあるので、クリックするとプレビューが表示されます。

使い方

使い方はとても簡単です。

[言語の名前]
ソースコード
[/言語の名前]

のように記述することで使用できます。

上記の[言語の名前]のところに、htmlやcss

と入れれば良い訳です。

対応言語は、
actionscript3
bash
clojure
coldfusion
cpp
csharp
css
delphi
erlang
fsharp
diff
groovy
html
javascript
java
javafx
matlab (keywords only)
objc
perl
php
text
powershell
python
ruby
scala
sql
vb
xml

とたくさんあります。

注意点は、テキストモードで入力することですね。

設定画面の「テーマ」を変えると何種類かデザインを変えることができますので、いろいろ試してみてくださいね。