Fun-Techlab.com

おじさんエンジニアのプログラミングとLinuxのTry & Error

*

WordPressでソースコードを表示するための[Crayon Syntax Highlighter]プラグインをインストール

      2016/07/13

今後、WordPressの記事の中でソースコードを記載することが多くなるだろうと思います。
そこでWordPressのプラグインの「Crayon Syntax Highlighter」を導入して、ソースコードを綺麗に表示できるようにしました。

ソースコードを表示するときは<pre>タグを使って表示します

ソースコードをhtmlを使ったWebページに表示するときは、
<pre>…</pre>
<code>…</code>
の2つのタグを使います。
<code>タグはインライン要素なので半角スペースや改行を表現できないので<pre>タグを使うことになります。

<pre>タグを使うことで、ソースコードは表示できるようになりますが、IDE(開発統合環境)やsublime,Atomといったテキストツールのように色分けされている方が見やすいです。
そこで、今回は「Crayon Syntax Highlighter」ブラグインを導入します。

Crayon Syntax Highlighterプラグインのインストール

インストールする場合は、WordPressの管理画面から検索してインストールします。もしくは、WordPress.orgからダウンロードしてPluginディレクトリにアップロードしてインストールすることができます。

Cranyon Syntax Highlighterを
この様にソースコードを綺麗に表示することができます

sample(bootstrap base.html)
XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>
 
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!!</h1>
 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

対応言語

「Crayon Syntax Highlighter」では、PHPやRubyはもちろんのこと最近話題noSwiftにも対応しています。その数は、54種類のプログラム言語をサポートしています。

WordPress.orgに掲載されている対応言語は、以下のとおりです。(2015/12/27時点)

  • C1
  • ABAP
  • ActionScript
  • AmigaDOS
  • Apache
  • AppleScript
  • Arduino
  • Assembly (x86)
  • AutoIt
  • C
  • C#
  • C++
  • Clojure
  • CoffeeScript
  • CSS
  • Delphi/Pascal
  • Delphi Web Script
  • Diff
  • Erlang
  • Go
  • Haskell
  • HTML (XML/XHTML)
  • INI
  • Lisp
  • Lua
  • Microsoft Registry
  • MIVA Script
  • Monkey
  • MS-DOS
  • MySQL
  • Java
  • JavaScript
  • Objective-C
  • Papyrus
  • Perl
  • PHP
  • PL/SQL
  • PostgreSQL
  • PowerShell
  • Python
  • R
  • Ruby
  • Rust
  • Scheme
  • Shell (Unix)
  • Swift
  • Transact-SQL
  • TeX
  • Vim
  • Visual Basic
  • Visual Basic .NET
  • YAML
  • ZSH
  • Others will be added when requested

Crayon Syntax Highlighterの各種設定

そのままでもソースコードを綺麗に表示はしてくれますが、より使い勝手をよくするためにこの様な設定ができるようになっています。

WordPress管理画面　メニュー設定 > Crayon の選択して設定画面を表示

  • テーマの設定
  • フォントの設定
  • 各種サイズ
  • ツールバー
  • etc…

各種設定のレポートはおいおいするということで。。。

 - WordPress , , ,