prism.js

Posted by muchag | Library & PlugIn & AddIn,WordPress | 2017-12-07 (木) 22:30:03

今度こそ、長年愛用してきた iG:Syntax Hiliter とおさらばすることになりそう。
寂しい><
前回

公式:Prism

【環境】
PrismJS: 1.9.0
導入
設定

公式サイトの ダウンロードページ にて設定。

わけも分からず、欲張って入れたので
Total filesize: 146.01KB (96% JavaScript + 4% CSS)
あちゃーw

()内は、<code class=”language-xxxxx”> の xxxxx に設定すべき値。
公式:Supported languages

  • Compression level:
    • カスタマイズをしたいので、[Development version] を選択
  • Core
  • Themes
    • ダークテーマが好きなので、[Okaidia]
  • Languages
    • Markup(markup)
    • CSS(css)
    • C-like(clike)
    • JavaScript(javascript)
    • ActionScript(actionscript)
    • Apache Configuration(apacheconf)
    • AppleScript(applescript)
    • Bash(bash)
    • BASIC(basic)
    • Batch(batch)
    • C(c)
    • C#(csharp)
    • C++(cpp)
    • CoffeeScript(coffeescript)
    • Diff(diff)
    • Docker(docker)
    • Git(git)
    • Go(go)
    • Haskel(haskell)
    • HTTP(http)
    • Ini(ini)
    • Java(java)
    • JSON(json)
    • Less(less)
    • Markdown(markdown)
    • nginx(nginx)
    • Objective-C(objectivec)
    • PHP(php)
    • .properties(properties)
    • Python(python)
    • Ruby(ruby)
    • Sass (Sass)(sass)
    • Sass (Scss)(scss)
    • Scala(scala)
    • Smarty(smarty)
    • SQL(sql)
    • Stylus(stylus)
    • Swift(swift)
    • Textile(textile)
    • Twig(twig)
    • TypeScript(typescript)
    • VB.Net(vbnet)
    • vim(vim)
    • Wiki markup(wiki)
    • YAML(yaml)
  • Plugins
    • Line Highlight
    • Line Numbers
    • Autolinker
    • Show Language
    • JSONP Highlight
    • Highlight Keywords
    • Remove initial line feed
    • Command Line
    • Unescaped Markup
    • Toolbar
DL

ページ下部より .js と .css を個別に DL。

配置

テーマディレクトリ内に配置。

/theme_directory/css/prism.css
/theme_directory/js/prism.js
WordPress へ組み込み
/wp-includes/functions.php

へ、下記を追加。
nobbi LABO:WordPressでシンタックスハイライトならPrism.jsが軽量&多機能でベストチョイス(2017-03-27)


/*---------------------------------------------------------
 * Prism.jsの呼び出し
 ----------------------------------------------------------*/
add_action( 'wp_enqueue_scripts', 'startPrism' );
function startPrism() {

 	wp_enqueue_style( 'prism-style', get_stylesheet_directory_uri() . '/css/prism.css' );
 	wp_enqueue_script( 'prism-script', get_stylesheet_directory_uri() . '/js/prism.js', array('jquery'), '20171206', true );
}
利用
書式

<pre>
<code>

</code>
</pre>

この中にコードを書くだけ。

メタ文字

HTML タグなどは、そのまま書くとおかしくなるので
調整が必要。

エスケープ(サニタイズ)

Syncer:HTML Escape / Unescape
mwSoft Tools:HTMLエスケープ(サニタイズ)ツール

スクリプト扱い

公式:Unescaped markup


<script type="text/plain" class="language-markup">
<p>Example</p>
</script>

と書かれていたけど、実際にやってみるとうまく表示されない。

コメント化

公式:Unescaped markup


<pre class="language-markup"><code><!--
<p>Example</p>
--></code></pre>

と書かれていたけど、実際にやってみるとうまく表示されない。

改行

個人的には、下記のように、code タグとコード本文は改行して記述したいのだけど


<pre class="line-numbers" data-language="HTML" data-start="" data-line="">
<code class="language-markup">
&lt;script type=&quot;text/plain&quot; class=&quot;language-markup&quot;&gt;
&lt;p&gt;Example&lt;/p&gt;
&lt;/script&gt;
</code>
</pre>

このように記述すると、下記のごとく、

  • 先頭行が空白
  • 最後尾に空白

という見た目になってしまう。



<script type="text/plain" class="language-markup">
<p>Example</p>
</script>

なので、

  • 公式:Remove initial line feed を導入することで先頭行を解決
  • code 閉じタグをコード本文の最後に続けることで最後尾を解決

<pre class="line-numbers" data-language="HTML" data-start="" data-line="">
<code class="language-markup">
&lt;script type=&quot;text/plain&quot; class=&quot;language-markup&quot;&gt;
&lt;p&gt;Example&lt;/p&gt;
&lt;/script&gt;</code>
</pre>
class

<code> へ class=”language-xxxxx” と指定。


<pre>
<code class="language-xxxxx">

</code>
</pre>

xxxxx に書くべきワードは、上述。

行番号
サンプル
クラスの設定方法

公式:Different markup

言語毎のサンプル

公式:Per language examples

カスタマイズ
言語表記

下記優先順位にて決定される。

  1. <pre data-language=”xxxxx”>
  2. var Languages に定義されている内容
  3. <code class=”language-xxxxx”>

<code class=”language-xxxxx”> の xxxxx の部分に
prism.js 内に定義されていない語句を書けば、
Plain Text と判断されて、文字色は白一色となり
言語名は、xxxxx がパスカライズされる。

文字サイズ

言語表記が小さいと感じたので、font-size を修正。


pre.code-toolbar > .toolbar a,
pre.code-toolbar > .toolbar button,
pre.code-toolbar > .toolbar span {
	color: #bbb;
	/* font-size: .8em; ← コメントアウト */
	padding: 0 .5em;
	background: #f5f2f0;
	background: rgba(224, 224, 224, 0.2);
	box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
	border-radius: .5em;
}
行ハイライト

.line-highlight {
	position: absolute;
	left: 0;
	right: 0;
	padding: inherit 0;
	margin-top: 1em; /* Same as .prism’s padding-top */

	background: hsla(24, 20%, 50%,.08);
-	background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
+	background: linear-gradient(to right, rgba(255, 255, 0, .3) 70%, rgba(255, 255, 0, 0));

138行目。
hsla はピンとこないので、rgba に書き換えて、アルファ値を調整した。

文字色

諸々調整。

Library & PlugIn & AddIn,WordPress | 2017-12-07 (木) 22:30:03 |

Simple Membership

Posted by muchag | WordPress | 2016-01-23 (土) 22:27:13

参考サイト

Toro のマド:WordPressで会員サイト用プラグインSimple Membership!

WordPress | 2016-01-23 (土) 22:27:13 |

SQL の確認

Posted by muchag | OpenPNE 3.x,Symfony 1.x | 2015-10-08 (木) 18:34:07

発行されている SQL 文を確認する方法。

【環境】
OpenPNE:3.8.15
Symfony:1.4.13
doctrine:1.2.4
モデル

モデル生成時に自動的に生成される Table クラスで書く場合。

  1. $result = $this->createQuery('p')
  2.     ->leftJoin('p.Translation t WITH t.lang = ?', $culture)
  3.     ->andWhere('p.id = ?', 1)
  4.     ->execute();

上記のようにすることで目的のレコードを取得できるけど
createQuery メソッドで Doctrine_Query が返ってきているので
最後の execute メソッドを getSqlQuery に変更することで、生 SQL 文を取得できる。

  1. echo $this->createQuery('p')
  2.     ->leftJoin('p.Translation t WITH t.lang = ?', $culture)
  3.     ->andWhere('p.id = ?', 1)
  4.     ->getSqlQuery();
実際に利用してみて思った
  1. $query = $this->createQuery('p')
  2.     ->leftJoin('p.Translation t WITH t.lang = ?', $culture)
  3.     ->andWhere('p.id = ?', 1);
  4.  
  5. echo $query->getSqlQuery();
  6.  
  7. $result = $query->execute();

こういう風に記述してやると見やすい。

色々な記事で、execute() を切り離して記述しているのは
こういうことがあるからかも?

OpenPNE 3.x,Symfony 1.x | 2015-10-08 (木) 18:34:07 |

SoftDelete

Posted by muchag | OpenPNE 3.x,Symfony 1.x | 2015-09-06 (日) 17:41:37


SoftDelete:日本語版

レコードを削除する際に、本当に削除(物理削除)するのではなく
削除フラグを立てることによって、削除モードにする(論理削除)機能。

【環境】
OpenPNE:3.8.15
Symfony:1.4.13
doctrine:1.2.4
設定
ProjectConfiguration

ここまで実装方法などについて書いてきましたが、実はこれだけだと動きません。
Doctrineのデフォルトの設定では、Doctrine_Queryを実行前後で修正することが出来なくなっており、そこを設定してあげる必要があります。この設定の方法がsymfony 1.0とsymfony 1.1で変わってきます。

symfony 1.1ではProjectConfigurationクラスに設定を記述します。

アシアルブログ:Doctrineで論理削除を意識せずに扱う

ProjectConfiguration.class.php
  1. class ProjectConfiguration extends sfProjectConfiguration
  2. {
  3.   protected $plugins = array('sfDoctrinePlugin');
  4.  
  5.   public function configureDoctrine($manager)
  6.   {
  7.     $manager->setAttribute(Doctrine::ATTR_USE_DQL_CALLBACKS, true);
  8.   }
  9. }
OpnePNE3

OpenPNE3 では、こういう設定を追加する場所が用意されているっぽい。
まだ、成功体験をしていないので、本当にこれでよいかは不明。

(openpne3)\config\ProjectConfiguration.class.php
  1. public function setupProjectOpenPNEDoctrine($manager)
  2. {
  3.     // You can write your own configurations.
  4.  
  5.     // In default, OpenPNE uses foreign key.
  6.     // If you want not to use foreign key, comment out the following configuration:
  7.     // $manager->setAttribute(Doctrine::ATTR_EXPORT, Doctrine::EXPORT_ALL ^ Doctrine::EXPORT_CONSTRAINTS);
  8.  
  9.     $manager->setAttribute(Doctrine::ATTR_USE_DQL_CALLBACKS, true);
  10. }
schema
schema.yml
  1. Category:
  2.   actAs:
  3.    - SoftDelete
設定変更

カラム名やデータ型を変更したい場合は、下記のように記述すればよいみたい。
Symfony world:Doctrine SoftDelete behavior usage
→この記事のコメント投稿内情報。未検証。

  1. Category:
  2.   actAs:
  3.     SoftDelete:
  4.       name: is_deleted
  5.       type: datetime

力技でやっている人もいるみたい。
@chisei のはてなブログ:Doctrineの論理削除

マニュアルとの差異

このように設定することで、当該テーブルへ deleted_at カラムが追加される
んだけど・・・

公式マニュアル では、delete カラムが追加される、とされている。
データ型も、公式マニュアルでは、TYNYINT とあるけど、実際は DATETIME になる。
バージョンの問題かしらね~。

データ挿入

んで、実際に試してみた。
CSV で、データを突っ込む際に、deleted_at カラムには null を指定しておいたところ
当該カラムの値は 0000-00-00 00:00:00 となった。

CSV から Null を放り込む方法

文系プログラマによるTIPSブログ:MySQLのload dataで日付型にnullをセットする
こちらの記事がビンゴ!

  1. LOAD DATA
  2.     LOCAL INFILE 'data.csv'
  3.     INTO TABLE [table_name]
  4.     FIELDS TERMINATED BY ','
  5.     ENCLOSED BY '"'
  6.     SET
  7.         deleted_at = nullif(deleted_at, '0000-00-00 00:00:00')
  8. ;

上記記事では、指定項目がもっといっぱいあったけど
ひとまず、私の今回の環境およびデータでは、上記 SQL にて、
無事に daleted_at カラムへ Null 値を放り込めた。

nullif

どうやら第2引数に、データ型に合わせたデフォルト値を設定するみたい。
なので、その他のデータ型は下記の通り。

  1. SET
  2.         datetime = nullif(datetime, '0000-00-00 00:00:00')
  3.         date = nullif(date, '0000-00-00')
  4.         time = nullif(time, '00:00:00')
データ取得
  1. $result = $this->createQuery('c')
  2.     ->execute();

データ取得を試みたところ
取得データ数は 0 。

SQL 確認

SQL の確認 のごとく、発行された SQL 文を確認すると、
ちゃんと WHERE 句が付記されている。

  1. WHERE (o.deleted_at IS NULL)

※エイリアスに p を指定しているのに、テーブル名の先頭文字 o をエイリアスにされているが気になるけど。。。

エイリアス o

これは、こちらの指定した DQL から Doctrine が SQL を生成する際に、
指定されたテーブルを順番に o1, o2, o3, … と再指定しているためだった。

その o も、恐らく、テーブル名の頭文字を取っていると思われる。
OpenPNE3 の場合、テーブル接頭辞を付けているため
全テーブルが op_ で始まるのよね。

原因

Doctrine が NULL を探しているのに対して、
データ側は ‘0000-00-00 00:00:00’ という値であるため
スルーされていた。

解決

上記 データ挿入→CSV から Null を放り込む方法 を用いて
値を Null にしてやることで、ちゃんとデータを取得できるようになった。

過去の対応策
  1. $result = $this->createQuery('p')
  2.     ->andWhere('p.deleted_at = ?', '0000-00-00 00:00:00')
  3.     ->execute();

これで一応拾ってくることはできた。

とりあえずはこれでいくしかないけど。。。意味なーい!
いつか解明しなければ。。。
(やっと解明できた)

エイリアス

ちなみにテーブルエイリアスを付けないと、上記記述でも拾ってこない。

  1. // NG
  2. $result = $this->createQuery()
  3.     ->andWhere('deleted_at = ?', '0000-00-00 00:00:00')
  4.     ->execute();

必ずエイリアスをつける必要があります。
ただしこれはSELECT限定で、DELETEのときはエイリアスがなくても動くようです。

アシアルブログ:Doctrineで論理削除を意識せずに扱う

OpenPNE 3.x,Symfony 1.x | 2015-09-06 (日) 17:41:37 |

plugin -> iG:Syntax Hiliter カスタマイズ 2015-09-01

Posted by muchag | Library & PlugIn & AddIn,WordPress | 2015-09-01 (火) 16:52:52

iG:Syntax Hiliter をカスタマイズ その3。
数日前、WordPress 本体のヴァージョンアップのお知らせがきており、それに合わせて更新したら
iG:Syntax Hiliter も更新のお知らせがきたので、更新してみた。
そうしたら、表示が大分変わってしまった・・・ので、再挑戦~。

前回記事

【環境】
WordPress:4.3
iG:Syntax Hiliter:5.0
GeSHi:1.0.8.11
独自タグの追加
ハイライト設定ファイルへの紐付け

独自に設定したショートタグをプラグインに認識させる方法。

plugins/igsyntax-hiliter/classes/frontend.php
  1. /**
  2.  * @var Array Contains file names for GeSHi language files associated with expected tag names
  3.  */
  4. protected $__geshi_language = array(
  5.     'as' => 'actionscript',
  6.     'html' => 'html4strict',
  7.     'js' => 'javascript',
  8.     'evba' => 'vbnet',        ← 追加した独自タグ
  9. );

このように記述してやることで、独自に設定したショートタグから

plugins/igsyntax-hiliter/geshi

にある、各言語ハイライト設定ファイルへと紐付けることができる。

言語表示文字列への紐付け

独自に設定したショートタグを任意の文字列にて表示させる方法。

plugins/igsyntax-hiliter/classes/frontend.php
  1. /**
  2.  * @var Array Contains display names for some languages, like C# for csharp, VB.NET for vbnet
  3.  */
  4. protected $__geshi_language_display = array(
  5.     'cpp'         => 'C++',
  6.     'cfm'         => 'Cold Fusion',
  7.     'csharp'      => 'C#',
  8.     'vbnet'       => 'VB.NET',
  9.     'as'          => 'ActionScript',
  10.     'c_mac'       => 'CMac',
  11.     'html'        => 'HTML',
  12.     'html4strict' => 'HTML4',
  13.     'evba'        => 'Excel VBA',
  14. );
外観

今回の CSS ファイルは圧縮してあるので
行番号はなし。

全体
幅とマージン
plugins\igsyntax-hiliter\assets\css\front-end.css
  1. .syntax_hilite {
  2. background:#FFFFFF;
  3. width:98%;
  4. margin:10px 0px 20px 0px;
  5. border:1px solid #CCCCCC;
  6. border-left:none;
  7. border-right:none
  8. }
コード部
文字サイズ
plugins\igsyntax-hiliter\assets\css\front-end.css
  1. .syntax_hilite ol,.syntax_hilite .pre {
  2. width:90%;
  3. line-height:1.5em;
  4. margin-bottom:0px;
  5. padding-top:5px;
  6. font-size:1.25em
  7. }

全体幅を調節したせいか、こちらの幅を狭めておかないと
ハイライト行がはみ出す。

plugins\igsyntax-hiliter\assets\css\front-end.css
  1. .syntax_hilite ol,.syntax_hilite .pre {
  2. width:90%;
  3. line-height:1.5em;
  4. margin-bottom:0px;
  5. padding-top:5px;
  6. font-size:1.25em
  7. }
ツールバー
文字サイズ
plugins\igsyntax-hiliter\assets\css\front-end.css
  1. .syntax_hilite .toolbar {
  2. width:97.5%;
  3. margin:0px 0px 10px 0px;
  4. padding:5px 10px 5px 4px;
  5. background:#EEEEEE;
  6. font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  7. font-size:1em;
  8. color:#555555
  9. }
Library & PlugIn & AddIn,WordPress | 2015-09-01 (火) 16:52:52 |

SQLSTATE[HY000]: General error: 1005 Can’t create table

Posted by muchag | OpenPNE 3.x,Symfony 1.x | 2015-05-21 (木) 22:49:18

【環境】
Symfony:1.4.13
OpnePNE:3.8.15
状況

OpenPNE3 のプラグインを開発していて、DB の再構築を行ったところ
下記のようなエラーメッセージが出た。

エラーメッセージ
SQLSTATE[HY000]: General error: 1005 Can’t create table ‘database_name.#sql-16e8_55a’
(errno: 150).
Failing Query:
“ALTER TABLE op_my_hoge ADD CONSTRAINT op_my_hoge_parent_id_op_my_parent_id FOREIGN KEY (parent_id) REFERENCES op_my_parent(id)”.
Failing Query:
ALTER TABLE op_my_hoge ADD CONSTRAINT op_my_hoge_parent_id_op_my_parent_id FOREIGN KEY (parent_id) REFERENCES op_my_parent(id)
原因

よく見てみると
op_my_hoge.parent_id と op_my_parent.id のデータ型が異なっていた。

OpenPNE 3.x,Symfony 1.x | 2015-05-21 (木) 22:49:18 |

Symfony 1.x のデバッグ

Posted by muchag | Eclipse,OpenPNE 3.x,Symfony 1.x | 2015-04-27 (月) 12:19:28

自作のプログラムなら簡単にデバッグできるけど
Symfony のようなフレームワークは、よくわからなかったので、調べてみた。

【環境】
Eclipse: Luna Service Release 1 (4.4.1)
Symfony: 1.4.13
デバッグの構成

[実行]-[デバッグの構成]
[PHP Web アプリケーション]
初めての場合は、自動で新規構成が表示される。
2つ目以降は、左ペインツールバーにある [新規の起動構成] をクリック。

サーバー
名前

自由。

サーバー

任意に選択。

未設定の場合は、Xdebug 再び! 参照。

ファイル

[参照] から、(Symfony プロジェクト)\web\index.php を選択すると
/(Symfony プロジェクト)/web/index.php
と入力される。

2015-12-17 追記 ここから

今日は、上述のやり方ではできなかった。
Xdebug 再び! に追記しておいたので、参照。

2015-12-17 追記 ここまで
URL

[自動生成] のチェックを外す。
すると、右のテキストボックスがアクティブになる。

左のテキストボックスには「http://localhost/」と入っている。

これで、XAMPP の htdocs までのパスは確保されているので
右のテキストボックスに、それ以下を記述。
「/(appname)/index.php」(自分の環境に適宜合わせる)

適用

[適用] をクリック。

参考サイト

Layer8:Windows上のEclipseでsymfonyをデバッグする方法

Eclipse,OpenPNE 3.x,Symfony 1.x | 2015-04-27 (月) 12:19:28 |

自動アップグレードエラー

Posted by muchag | WordPress | 2015-03-17 (火) 20:32:05

何か設定を変えたつもりはないんだけど、
ある日突然、プラグインの自動アップグレードができなくなった。

【環境】
WordPress:4.1.1–ja
症状

プラグイン:Akismet の更新を行おうとしたら、下記のようなエラーに。

ダウンロードに失敗しました。 一時ファイルへの書き込みに失敗しました。

Google 先生へ質問したところ、下記を確認せい、と。

  • PHP セーフモード
  • 一時ディレクトリのパーミッション

PHP は、セーフモードではないので、パス。
 

一時ディレクトリのパーミッション

今まで問題なく、プラグインだろうが本体だろうが更新できてきたのに
今更なにかしらね~。
 

アップグレード用ディレクトリ
デフォルト?

WordPress のアップグレード用ディレクトリは下記らしい。

/(wordpress)/wp-content/upgrade

パーミッションは755。
試しに777にしてみたところで、変わらず。
 

自作

自分で設定してもよいらしいので、新しく設置。

/(wordpress)/tmp
/(wordpress)/wp-config.php
  1. define ('WP_TEMP_DIR', '/home/()/()/(wordpress)/tmp');

パーミッションは755。

これで試したところ、無事にアップグレードできた。

なんかスッキリしないけど、ひとまずは解決。

WordPress | 2015-03-17 (火) 20:32:05 |

Commented entry list -> 3.0 対応

Posted by muchag | WordPress | 2015-03-08 (日) 14:09:40

ある日気がついたら、最近のコメントが「No Responses.」に。
エラーログがエライことになっていた。

【環境】
Wordpress:4.1.1–ja
Commented entry list:1.2
症状

最近のコメントが「No Responses.」になっている。
 

エラーログ
  1. [07-Mar-2015 15:04:32 UTC] WordPress データベースエラー: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '  WHERE .ID=.comment_post_ID AND .comment_approved='1' AND .comment_type='' AND ' at line 1 for query SELECT ID, post_title, post_date, comment_ID, comment_author, comment_author_url, comment_author_email, comment_date FROM ,  WHERE .ID=.comment_post_ID AND .comment_approved='1' AND .comment_type='' AND .user_id!='2' ORDER BY .comment_date DESC LIMIT 5 made by require('wp-blog-header.php'), require_once('wp-includes/template-loader.php'), include('/themes/PreserverOfHealth/index.php'), get_header, locate_template, load_template, require_once('/themes/PreserverOfHealth/header.php'), get_sidebar, locate_template, load_template, require_once('/themes/PreserverOfHealth/sidebar.php'), get_recently_commented
  2. [07-Mar-2015 15:04:32 UTC] WordPress データベースエラー: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '  WHERE .ID=.comment_post_ID AND .comment_approved='1' AND .comment_type!='' ORD' at line 1 for query SELECT ID, post_title, post_date, comment_ID, comment_author, comment_author_url, comment_author_email, comment_date FROM ,  WHERE .ID=.comment_post_ID AND .comment_approved='1' AND .comment_type!='' ORDER BY .comment_date DESC LIMIT 5 made by require('wp-blog-header.php'), require_once('wp-includes/template-loader.php'), include('/themes/PreserverOfHealth/index.php'), get_header, locate_template, load_template, require_once('/themes/PreserverOfHealth/header.php'), get_sidebar, locate_template, load_template, require_once('/themes/PreserverOfHealth/sidebar.php'), get_recently_trackbacked

 

対処法

んで、get_recently_commented で、Google 先生へ質問したところ、先頭に 小粋空間 さんが表示された。
 
さっすがー。
ラッキー♪ と思って、リンクへ飛ぶと、アッサリ解決。
この度もお世話になりました。
ありがとうございました。
 

/(wordpress)/wp-content/plugins/commented-entry-list_1.2/commented-entry-list.php

11行目辺りと51行目辺りに同じ記述があるので、修正。

  1. global $wpdb, $tablecomments, $tableposts;

  1. global $wpdb;
  2. $tablecomments = $wpdb->comments;
  3. $tableposts = $wpdb->posts;

 

参考サイト

小粋空間:WordPress 3.0 で「Commented entry list」プラグインが正常に動作しない不具合の対処
REIMA’s Blog:WordPress 3.0 RC1 日本語版 リリース

WordPress | 2015-03-08 (日) 14:09:40 |

Crayon Syntax Highlighter

Posted by muchag | Library & PlugIn & AddIn,WordPress | 2015-02-10 (火) 12:32:38

長年愛用してきた iG:Syntax Hiliter とおさらばする日がやってきた。寂しい><

Crayon 導入中止

せっかく記事を書いたけど、Crayon の導入を中止した。

な~ぜか!
as, vb のショートタグに無反応 😯

さよなら Crayon 短い付き合いだったね。。。

ここまで

 

【環境】
WordPress:4.1
Crayon Syntax Highlighter:2.6.9
iG:Syntax Hiliter:4.3
お別れの理由

iG:Syntax Hiliter では、知らないうちに、php や javascript など、お作法のある言語では、
その記述が必須になっていた。
 
このように記述しなければならず

  1. <?php
  2. echo 'Hello World!';
  3. ?>

これでは、ハイライトされない。

  1. echo 'Hello World!';

 
これはこれで大切なことなのかもしれないけれど、JavaScript のときは、特に鬱陶しくなってしまう。

  1. jQuery()
  2.  
  3. $()
  1. <script type="text/javascript">
  2. jQuery()
  3.  
  4. $()
  5. </script>

 
ね!

jQuery の書式 こちらの記事を書いていて、どうにも我慢できなくなり、
iG:Syntax Hiliter とお別れする決心をしました。
 

選んだ理由
選択肢

そもそも選択肢が少ないね~。
前に iG:Syntax Hiliter を導入したとき も選択肢が少なかったけど
今でもあまりないみたい。
需要は高そうなのにね~。
 

決め手

乗り換えるにあたって、最大の決め手はもちろん!
今までの記事を書き直さなくて良いこと。
 
その点、Crayon Syntax Highlighter は、iG:Syntax Hiliter で利用していたショートタグ
[php]hogehoge[/php]
を解釈してくれるので、いいね! 🙂

言語混在

後、嬉しい機能として言語の混在でもOK。
 

必要とする仕様・機能

その他、私が必要とする機能が一通り揃っていたのでOK。

  • 仕様
    • 1行毎に背景色を変える
    • 行番号を表示できる
    • QuickTag から使える(入力が楽)
  • 機能
    • 強調行を設定できる
    • 開始行番号を設定できる

 

設定

下記は私が変更した設定。
 

一般設定
テーマ

リストからお好みのを探して [Duplicate] とすると、
テーマがコピーされ編集できる状態になるので [Edit]
 
すると編集画面が起動するので、画面右側でカスタマイズ。
 

ツールバー

[ツールバーの表示]-[常に表示]
[ソース言語を表示]-[常に表示]
 

コード

常にスクロールバーを表示する
チェックを入れる。
 

タグ

Crayonsとして[php][/php]のようなミニタグをキャプチャします。
チェックを入れる。

これで、古い記事のショートタグを認識してくれる。
 
但し、[php num=”3″ highlint=”5″] のように属性つきのものは、このままだと無効になってしまうので
Crayon Syntax Highlighter に拾ってもらえる文言に変更。

  1. UPDATE `wp_posts` SET `post_content` = REPLACE(`post_content`, " num=", " start-line=");
  2. UPDATE `wp_posts` SET `post_content` = REPLACE(`post_content`, " firstline=", " start-line=");
  3. UPDATE `wp_posts` SET `post_content` = REPLACE(`post_content`, " highlight=", " mark=");

これで無事に Crayon に拾ってもらえた。

また、逆に [php] という文字列を表示したいときは、$[php] のように前に $ を付けてやることで、
Crayon をエスケープできる。
 

その他

アニメーションを無効にする
プログラム実行時の統計を無効にする
重くなりそうなので、チェックをつけた。
 

デバッグ
エラー

個々設置(Crayon)のエラーを記録
システム全体のエラーを記録
カスタムエラーメッセージを表示する
重くなりそうなので、ひとまず全てのチェックを外した。

Library & PlugIn & AddIn,WordPress | 2015-02-10 (火) 12:32:38 |
次ページへ »