Windows Live Writer で各種ソースコードを投稿する方法
概要
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 と省略)
デフォルト設定でも使用できるが、それではこのプラグインを使用する意味が無い。
以下の設定変更を行う。(予定
- ツールバーは固定表示
設定:ツールバーの表示 / 常に表示 - ソース言語は表示
設定:ソース言語を表示 / 常に表示 - 折り返し行はデフォルトで表示
設定:Wrap lines by default - 常に横のスクロールバーは表示 ※縦は無い
設定:常にスクロールバーを表示する - エラーログ等は出力しない ※不要。見ても判らない(汗
設定:個々設置(Crayon)のエラーを記録 / システム全体のエラーを記録 / カスタムエラーメッセージを表示する
[WP] 投稿済みの記事を修正
記事内の<pre> タグ内の属性で指定する。
例 : <pre title=”Test Code”>
- 属性 : title=”Test Code”
- 属性名 : title
- 属性値 : Test Code
<pre> タグ内の指定方法は以下の2種類
- <pre title=”Code – VBA” mark=”5,8″ lang=”vb” decode=”true” start-line=”10″ >
- <pre title=”Code – VBA” class=”mark:5,8 lang:vb decode:true start-line:10 “>
最初の1の方が見やすい。が、Windows Live Writerで投稿された記事は上記の2の形式で<pre> タグが作られている。
[WP] Crayon Synax Highlighter :属性を直接で修正
基本はプラグインの「Crayon Syntax Highlighter 設定」でデフォルトが設定できる。
個別に表示オプションを変更したい場合は、記事の編集を開いて、<pre> タグ内の属性を直接修正する。
- タイトルを追加
修正前 :
<pre class=”decode:true lang:php “>
修正後 :
<pre title=”Sample Code – PHP” class=”decode:true lang:php “> - タイトルを変更
修正前 :
<pre title=”Test Code” class=”decode:true lang:php “>
修正後 :
<pre title=”Test Code – PHP” class=”decode:true lang:php “> - 開始行をデフォルトの 1 から 24 に変更
修正前 :
<pre class=”lang:vb decode:true”>
修正後 :
<pre class=”lang:vb decode:true start-line:24 “> - 言語を変更
※省略時は自動解析
修正前 :
<pre class=”decode:true lang:php “>
修正後 :
<pre class=”decode:true lang:xhtml “> - 特定の行をハイライト
修正前 :
<pre class=”decode:true lang:php “>
修正後 :
<pre class=”decode:true lang:php mark:5,8“>
上記の例 : 画面表示行 5 と 8 をハイライト
4行目は[4] 5と8行目は[5,8] 2から10行目は[2-10] - 外部ファイルから取り込む
<pre class=”decode:true lang:php” url=”http://…” >
URLを指定してソースを読み込む?
※動作未確認 - 指定行を抜き出した状態で表示する
<pre class=”toolbar:0 lang:vb decode:true range:4-6 “>
ソース内の4から6行を抜き出して画面表示する。
[WP] WordPress側での設定での注意点
※編集中。多いからな~。
[WP] 「リセット」ボタンは注意
WordPress 側の「 Crayon Syntax Highlighter 設定」の「リセット」ボタンを押すと、当然だが全ての設定のリセットされるが、その結果も自動で保存される。
その他、気がついた事
- [crayon] ソースコード [/crayon] (※小文字で)で囲むだけでも、WordPress側のデフォルト設定で表示できる。(超簡単
[crayon toolbar=”1″ title=”Thank you!” start-line=”20″] (※小文字で)の様な感じでオプションの指定が出来る。
ただし、この場合はWindows Live Writer でプラグインを使った修正は出来ない。WordPress側で簡単に編集したい時に向いている。
- 複数のパソコンで編集を行う時、Windows Live Writerのプラグインを使ってソースの修正ができない場合が有る。その時は、ソース部分のみを自分でプラグインにコピーして編集する必要がある。
- Crayonsとして[php][/php]のようなミニタグをキャプチャします:
前に「SyntaxHighlighter Evolved」で[php]タグを使ってた場合はこれをチェックする。ソースの修正無しで前の記事が使えます。※動作未確認。 - Display the Tag Editor in any TinyMCE instances on the frontend (e.g. bbPress) :
「フロントエンド上の任意のTinyMCEのインスタンスでタグエディタを表示します(例:bbPress)」
デフォルトではオフだが、オンにすると「Crayon Syntax Highlighter 」が使える WYSIWYG ボタンがコメント欄に表示される。
- 上記のオプションをオフにしても(上記のボタンを消しても)、[crayon](※小文字で)タグなどを使えば、ソースコード表示は出来る。
ソースコードをコメント内で編集表示させたくない時はオプションの「コメント内のクレヨンを許可する」をオフにする。
※「クレヨン」とは「Crayon Syntax Highlighter」の省略名。 - WordPress 側で追加した部分をWindows Live Writer側で修正は出来ない。
推測理由:Windows Live Writer側はDIVタグを追加して、そのID属性値で管理している、みたい。
どうしても修正したい時はそのソースコードを別にバックアップコピーして、削除してから再度追加の形で変更する。 - Windows Live Writer側でソースコードを追加する時、Visual Basicの場合は「Sub xxx()」から、PHPの場合は「<php>」から、始まらないと前のスペースをカットしてしまう。その場合は仮に「Sub xxx()」又は「<php>」を最初に入れる。投稿後にWordPress側で追加した「Sub xxx()」又は「<php>」をカットすれば、処理できる。
- WordPress 側プラグインの「Show Crayon Posts」を押すと Crayon Syntax Highlighter を使っているリンク記事の一覧(ID、タイトル、投稿年月日、変更年月日、古いタグの使用)がボタンの下に表示されます。当然クリックすれば該当する記事が表示されます。
※「Contains Legacy Tags?」はタグが古いタイプかどうか、「SyntaxHighlighter Evolved」のタグかの判断にも使えるみたいです。
知りたいオプション
- 回り込み・左 : h-align:1
回り込み・中央 : h-align:2
回り込み・右 : h-align:3
参考にしたURL
気が付いたことが有れば、その都度、追加と修正を行います。