Windows Live Writer で各種ソースコードを投稿する方法

概要

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

Crayon Syntax Highlighter

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

 

  • 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

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内)の規定値(デフォルト)で表示される。

Crayon Syntax Highlighter Plug-in for Windows Live Writer

 

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

  • [] : 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)のエラーを記録 / システム全体のエラーを記録 / カスタムエラーメッセージを表示する

 

Crayon Syntax Highlighter の設定変更

 

Crayon Syntax Highlighter の設定変更

 

Crayon Syntax Highlighter の設定変更

 

Crayon Syntax Highlighter の設定変更

 

Crayon Syntax Highlighter の設定変更

 

 

[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 >

最初の1の方が見やすい。が、Windows Live Writerで投稿された記事は上記の2の形式で<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. 開始行をデフォルトの 1 から 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と8行目は[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 “>
    ソース内の4から6行を抜き出して画面表示する。

 

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

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

 

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

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

 

その他、気がついた事

  1. [crayon]  ソースコード [/crayon] (※小文字で)で囲むだけでも、WordPress側のデフォルト設定で表示できる。(超簡単
    [crayon toolbar=”1″ title=”Thank you!” start-line=”20″] (※小文字で)の様な感じでオプションの指定が出来る。
    ただし、この場合はWindows Live Writer でプラグインを使った修正は出来ない。WordPress側で簡単に編集したい時に向いている。
    Crayon Syntax Highlighter の [crayon] タグ
    Crayon Syntax Highlighter の [crayon] タグ
  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 ボタンがコメント欄に表示される。
    Crayon Syntax Highlighterの [Display the Tag Editor in any TinyMCE instances on the frontend (e.g. bbPress)]
  5. 上記のオプションをオフにしても(上記のボタンを消しても)、[crayon](※小文字で)タグなどを使えば、ソースコード表示は出来る。
    ソースコードをコメント内で編集表示させたくない時はオプションの「コメント内のクレヨンを許可する」をオフにする。
    ※「クレヨン」とは「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

 

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


コメントを
頂けると
嬉しいです。♡



↑ この部分は自作のプラグインでテキスト表示しています。
WordPress公式プラグインとしても登録されています。

日本語化ファイルのダウンロード時はポチッとコメントを入れて頂けるとうれしいです。
リンクはもっとうれしい! (^.^)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください