WordPressの使い方

概要

Windows Live Writer から PHP、VBA、HTML 等のソースコードをキレイに WordPress サイトで表示する方法（手順）を以下にメモする。

操作性を一番に重視して、以下のプラグインに決定した。

 

• Windows Live Writer 側のプラグイン ：Crayon Syntax Highlighter Plug-in
  （クレヨン・シンタックス・ハイライター）
  (別名：Crayon Code Snippet from DotCastle)
  Version 1.0.3 ： LastUpdate 2015/02/04・インストールはデフォルトでOK。変なソフトの勧誘等は無い。
  ・操作画面は英語だが、最低限の入力でOK。
• WordPress 側のプラグイン ：Crayon Syntax Highlighter
  Version 2.8.0 ： LastUpdate 2016/01・インストールは他のプラグインと同様。
  ・設定項目が非常に多いがデフォルト設定（9割が日本語）でも十分動作する

SyntaxHighlighter Evolved を以前は使っていたが、以下の理由で乗り換える。

• 動作がイマイチ
• Object-C などの技術者向け、多言語で無い
• 操作性に物足りなさを感じる
• Windows Live Writer 側のプラグインもイマイチ良くない
  「PreCode Code Snipet Manager」は古くて、もう使えない！

 

目次

• 概要
• Crayon Syntax Highlighter Plug-in for Windows Live Writer
• [WLW] 画面で指定できるオプションの一覧
• Crayon Syntax Highlighter
• [WP] 投稿済みの記事を修正
• [WP] Crayon Synax Highlighter ：属性を直接で修正
• [WP] WordPress側での設定での注意点
• [WP] 「リセット」ボタンは注意
• その他、気がついた事
• 知りたいオプション
• 参考にしたURL

Crayon Syntax Highlighter Plug-in for Windows Live Writer

Windows Live Writer 側 （以降は WLW と省略） で使うプラグイン。

WLW 内部では「 Crayon Code Snippet from DotCastle 」で表示される。

WLWからプラグインのオプション（設定）変更はできるが、WordPress側でデフォルト設定が有るので、設定変更は必要と思われる。ので、解説は省略。

 

[WLW] 画面で指定できるオプションの一覧

Windows Live Witer プラグイン「Crayon Syntax Highlighter Plug-in for Windows Live Writer　v1.0.3」側で指定できるオプションの一覧。

以下を指定しないとサーバー側（WordPress内）の規定値（デフォルト）で表示される。

 

「意味」列の以下の記号は

• [] : WordPressのプラグインでの日本語文字
• () : WordPressのプラグインでの英語文字

 

オプション	属性	意味
Theme
Name	theme:classic	テーマ
Font　[フォント]
Name	font:monaco	フォント名
Font size	font-size:12	フォントサイズ
Font size(Line Height)	line-height:15	Line Height
Toolbar　[ツールバー]
Display	toolbar:0	[ツールバーの表示] 2=表示しない 1＝常に表示 0＝マウスオーバー時 <-バグ？
Overlay on code	toolbar-overlay:true	[コードを押し下げるのではなく、コード上に重ねて表示]
Toggle on single click when overlayed	toolbar-hide:true	[重ねて表示の場合にシングルクリックでツールバーを切り替える]
Delay hide on mouse out	toolbar-delay:true	[マウスアウト時にツールバーを隠すのを遅らせる]
Show title	show-title:true	[タイトルがある時は表示]
Language display	show-lang:0	[ソース言語を表示]
Lines　[行]
Stripend lines	striped:true	[コード行を縞模様で表示する]
Enable line marking	marking:true	[重要な行にマーキングを有効にする]
Enable line ranges	ranges:true	(Enable line ranges for showing only parts of code)コー​​ドの部分だけを表示するための行範囲を有効にする
Display numbers by default	nums:true	[デフォルトで行番号を表示]
Enable line number toggling	nums-toggle:true
Wrap lines by default	wrap:false	デフォルトで折り返し行の表示。 「Toggle Line Wrap」ボタンをクリック時はスクロールに変わる。
Enable line wrap toggling	wrap-toggle:true	行の折り返し機能をツールバーに表示
Starting line number	start-line:1	[行番号の開始数字]
Code　[コード]
Enable plain code view	plain:true	[単純なコードビューを有効にする]
Plain code view display trigger	show-plain:1	[単純なコードの切り替えを有効にする]
Enable plain code toggling	plain-toggle:true	[デフォルトでプレインコードを表示する]
Show plain code by default	show-plain-default:false	[コードのコピー/貼り付けを有効にする]
Enable copy paste	copy:true popup:true	[新しいウインドウでコードを開くを有効にする]
Enable open in new window		※不明
Always display scrollbars	scroll:false	[常にスクロールバーを表示する]
Minimaize code	minimize:false	※不明
Expand code beyond page border on mo	expand:false	※不明
Enable code expanding toggling	expand-toggle:true	※不明
Decode html entities in attributes	decode-attributes:true	[コード内のHTMLエンティティを出力]
Remove whitespaces surrounding short	trim-whitespace:true	[属性内のHTMLエンティティを出力]
Remove code tags surrounding shortco	trim-code-tag:true	[ショートコードの内容を囲む空白の部分を削除します]
Allow mixed language highlighting with d	mixed:true	※不明
Show mixed language icon	show_mixed:true	[区切り文字とタグが混合言語の強調表示を許可する]
Tab size in spaces	tab-size:4	[混合言語のアイコンを（+）を表示]
		(Convert tabs to spaces)
		[Tab挿入の空白代替え数（単純コードビュー）]
Blank lines before code	whitespace-before:0	※不明
Blank lines after code	whitespace-after:0	※不明

 

 

Crayon Syntax Highlighter

サーバー側の WordPress で使うプラグイン。（以降は WP と省略）

デフォルト設定でも使用できるが、それではこのプラグインを使用する意味が無い。

以下の設定変更を行う。（予定

1. ツールバーは固定表示
   設定：ツールバーの表示 / 常に表示
2. ソース言語は表示
   設定：ソース言語を表示 / 常に表示
3. 折り返し行はデフォルトで表示
   設定：Wrap lines by default
4. 常に横のスクロールバーは表示　※縦は無い
   設定：常にスクロールバーを表示する
5. エラーログ等は出力しない　※不要。見ても判らない(汗
   設定：個々設置(Crayon)のエラーを記録 / システム全体のエラーを記録 / カスタムエラーメッセージを表示する

 

 

 

 

 

 

 

[WP] 投稿済みの記事を修正

記事内の<pre> タグ内の属性で指定する。

例 ： <pre title=”Test Code”>

• 属性 ： title=”Test Code”
• 属性名 ： title
• 属性値 ： Test Code

<pre> タグ内の指定方法は以下の2種類

1. <pre title=”Code – VBA” mark=”5,8″ lang=”vb” decode=”true” start-line=”10″ >
2. <pre title=”Code – VBA” class=”mark:5,8 lang:vb decode:true start-line:10 “>

最初の１の方が見やすい。が、Windows Live Writerで投稿された記事は上記の２の形式で<pre> タグが作られている。

 

[WP] Crayon Synax Highlighter ：属性を直接で修正

基本はプラグインの「Crayon Syntax Highlighter 設定」でデフォルトが設定できる。

個別に表示オプションを変更したい場合は、記事の編集を開いて、<pre> タグ内の属性を直接修正する。

 

1. タイトルを追加
   修正前 ：
   <pre class=”decode:true lang:php “>
   修正後 ：
   <pre title=”Sample Code – PHP” class=”decode:true lang:php “>
2. タイトルを変更
   修正前 ：
   <pre title=”Test Code” class=”decode:true lang:php “>
   修正後 ：
   <pre title=”Test Code – PHP” class=”decode:true lang:php “>
3. 開始行をデフォルトの １ から 24 に変更
   修正前 ：
   <pre class=”lang:vb decode:true”>
   修正後 ：
   <pre class=”lang:vb decode:true start-line:24 “>
4. 言語を変更
   ※省略時は自動解析
   修正前 ：
   <pre class=”decode:true lang:php “>
   修正後 ：
   <pre class=”decode:true lang:xhtml “>
5. 特定の行をハイライト
   修正前 ：
   <pre class=”decode:true lang:php “>
   修正後 ：
   <pre class=”decode:true lang:php mark:5,8“>
   上記の例 ： 画面表示行 5 と 8 をハイライト
   4行目は[4] 5と８行目は[5,8] 2から10行目は[2-10]
6. 外部ファイルから取り込む
   <pre class=”decode:true lang:php” url=”http://…” >
   URLを指定してソースを読み込む？
   ※動作未確認
7. 指定行を抜き出した状態で表示する
   <pre class=”toolbar:0 lang:vb decode:true range:4-6 “>
   ソース内の４から６行を抜き出して画面表示する。

 

[WP] WordPress側での設定での注意点

※編集中。多いからな～。

 

[WP] 「リセット」ボタンは注意

WordPress 側の「 Crayon Syntax Highlighter 設定」の「リセット」ボタンを押すと、当然だが全ての設定のリセットされるが、その結果も自動で保存される。

 

その他、気がついた事

1. [ｃｒａｙｏｎ]  ソースコード　[/ｃｒａｙｏｎ] （※小文字で）で囲むだけでも、WordPress側のデフォルト設定で表示できる。（超簡単
   [ｃｒａｙｏｎ toolbar=”1″ title=”Thank you!” start-line=”20″]　（※小文字で）の様な感じでオプションの指定が出来る。
   ただし、この場合はWindows Live Writer でプラグインを使った修正は出来ない。WordPress側で簡単に編集したい時に向いている。
   
   
2. 複数のパソコンで編集を行う時、Windows Live Writerのプラグインを使ってソースの修正ができない場合が有る。その時は、ソース部分のみを自分でプラグインにコピーして編集する必要がある。
3. Crayonsとして[php][/php]のようなミニタグをキャプチャします：
   前に「SyntaxHighlighter Evolved」で[php]タグを使ってた場合はこれをチェックする。ソースの修正無しで前の記事が使えます。※動作未確認。
4. Display the Tag Editor in any TinyMCE instances on the frontend (e.g. bbPress) ：
   「フロントエンド上の任意のTinyMCEのインスタンスでタグエディタを表示します（例：bbPress）」
   デフォルトではオフだが、オンにすると「Crayon Syntax Highlighter 」が使える WYSIWYG ボタンがコメント欄に表示される。
   
5. 上記のオプションをオフにしても（上記のボタンを消しても）、[ｃｒａｙｏｎ]（※小文字で）タグなどを使えば、ソースコード表示は出来る。
   ソースコードをコメント内で編集表示させたくない時はオプションの「コメント内のクレヨンを許可する」をオフにする。
   ※「クレヨン」とは「Crayon Syntax Highlighter」の省略名。
6. WordPress 側で追加した部分をWindows Live Writer側で修正は出来ない。
   推測理由：Windows Live Writer側はDIVタグを追加して、そのID属性値で管理している、みたい。
   どうしても修正したい時はそのソースコードを別にバックアップコピーして、削除してから再度追加の形で変更する。
7. Windows Live Writer側でソースコードを追加する時、Visual Basicの場合は「Sub xxx()」から、PHPの場合は「<php>」から、始まらないと前のスペースをカットしてしまう。その場合は仮に「Sub xxx()」又は「<php>」を最初に入れる。投稿後にWordPress側で追加した「Sub xxx()」又は「<php>」をカットすれば、処理できる。
8. WordPress 側プラグインの「Show Crayon Posts」を押すと Crayon Syntax Highlighter を使っているリンク記事の一覧（ID、タイトル、投稿年月日、変更年月日、古いタグの使用）がボタンの下に表示されます。当然クリックすれば該当する記事が表示されます。
   ※「Contains Legacy Tags?」はタグが古いタイプかどうか、「SyntaxHighlighter Evolved」のタグかの判断にも使えるみたいです。
   

 

知りたいオプション

1. 回り込み・左　：　h-align:1
   回り込み・中央　：　h-align:2
   回り込み・右　：　h-align:3

 

参考にしたURL

• [WP]Crayon Syntax Highlighter2.1.2でコメント欄にWYSIWYGのボタンが表示される…

 

気が付いたことが有れば、その都度、追加と修正を行います。