-
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
気が付いたことが有れば、その都度、追加と修正を行います。
- Windows Live Writer 側のプラグイン :Crayon Syntax Highlighter Plug-in