• 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

     

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