Crayon Syntax Highlighter

Posted by muchag | Library & PlugIn & AddIn,WordPress |
初回投稿:2015-02-10 (火) 12:32:38 | 最終更新:2015-02-10 (火) 20:35:18

長年愛用してきた 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)のエラーを記録
システム全体のエラーを記録
カスタムエラーメッセージを表示する
重くなりそうなので、ひとまず全てのチェックを外した。

Posted by muchag | Library & PlugIn & AddIn,WordPress |
初回投稿:2015-02-10 (火) 12:32:38 | 最終更新:2015-02-10 (火) 20:35:18

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

Posted by muchag | Library & PlugIn & AddIn,WordPress |
初回投稿:2015-01-30 (金) 11:47:43 | 最終更新:2015-09-04 (金) 16:43:14
2015-09-01 追記

新しい記事:plugin -> iG:Syntax Hiliter カスタマイズ 2015-09-01

ここまで

iG:Syntax Hiliter をカスタマイズ その2。
前回記事

【環境】
WordPress:4.1
iG:Syntax Hiliter:4.3
GeSHi:1.0.8.11
独自タグの追加
plugins\igsyntax-hiliter\class-ig-syntax-hiliter-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.     'as3' => 'actionscript3', ← 追加した独自タグ
  9. );

 

表記言語の追加
plugins\igsyntax-hiliter\class-ig-syntax-hiliter-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' => 'HTML4',
  12.     'html4strict' => 'HTML4',
  13.     'as3' => 'ActionScript3', ← 追加した言語タイトル
  14. );

しかし、このままだと全て大文字に変換されて表記されるので、CSS ファイルを修正。

外観
言語名
plugins\igsyntax-hiliter\css\front-end.css
  1. .syntax_hilite .toolbar .language-name {
  2.     font-weight: bold; width: 18%; text-align: center; /* text-transform: uppercase; を削除 */
  3.     cursor: default;
  4. }

 

文字サイズ
Toolbar
plugins\igsyntax-hiliter\css\front-end.css
  1. .syntax_hilite .toolbar {
  2.     width: 97.5%; margin: 0px 0px 10px 0px; padding: 5px 10px 5px 4px; background: #EEEEEE;
  3.     font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 1em; /* font-size: 0.75em → 1em; */
  4. }
コード
plugins\igsyntax-hiliter\css\front-end.css
  1. .syntax_hilite ol, .syntax_hilite .pre {
  2.     width: 94%; line-height: 1.5em;
  3.     margin-bottom: 0px; padding-top: 5px; font-size: 1.2em; /* font-size: 0.85em → 1.2em; */
  4. }

 

ハイライト色
plugins\igsyntax-hiliter\class-ig-syntax-hiliter-frontend.php
  1. if( is_array( $highlight ) ) {
  2.     $geshi->highlight_lines_extra( $highlight );    //show these lines as special
  3.     $geshi->set_highlight_lines_extra_style( 'background-color:#FFFFBC;' ); //set bg color for special lines
  4. }

ソースべた書きなのねw
 

縞々

偶数行目だけ背景色を付けたい。

plugins\igsyntax-hiliter\class-ig-syntax-hiliter-frontend.php
  1. $geshi->enable_line_numbers( GESHI_NORMAL_LINE_NUMBERS );   //show line numbers

413行目を下記のように変更。

  1. $geshi->enable_line_numbers( GESHI_FANCY_LINE_NUMBERS, 2 ); //show line numbers

 

function enable_line_numbers($flag, $nth_row = 5)

引数は2つ。
$flag
GESHI_NO_LINE_NUMBERS:行番号なし
GESHI_NORMAL_LINE_NUMBERS:行番号あり
GESHI_FANCY_LINE_NUMBERS:行番号と装飾あり
 
$nth_row = 5
何行毎に装飾を入れるか(省略すると5行毎)
 

plugins\igsyntax-hiliter\geshi.php
  1. /**
  2.  * Line number styles for fancy lines
  3.  * @var string
  4.  */
  5. var $line_style2 = 'font-weight: bold; vertical-align:top;';

ここのスタイルを好きなように。

私は下記のようにした。

  1. var $line_style2 = 'font-weight: normal; vertical-align:top; background-color: #FBF7FF;';

 

その他

幅や色、線の太さなど微調整。
 
しっかし、PHP は、コードハイライトが効いていない気がします。。。X-)

Posted by muchag | Library & PlugIn & AddIn,WordPress |
初回投稿:2015-01-30 (金) 11:47:43 | 最終更新:2015-09-04 (金) 16:43:14

固定ページの404エラー

Posted by muchag | WordPress |
初回投稿:2014-12-05 (金) 15:51:10 | 最終更新:2014-12-05 (金) 15:51:10

ややややや!
久しぶりに WordPress を触ってみたら、目次の目次ページが404エラー。

早速Google先生に質問したところ
ページスラッグに予約語が入っているかもよ~、という記事を発見。
公式フォーラム:[解決済み] 特定の固定ページのみ404ページに飛ばされる
(前は問題なく表示されていたのになぁ)

現在のページスラッグは index 。。。
はぁ、確かにまずいかも。
ということで変更してみたら、問題なく表示された。

作業後、参考サイトにあるリンク先の予約語リストを見てみたけど
index は含まれていなかった。

時間がないので、この先は調べず。

Posted by muchag | WordPress |
初回投稿:2014-12-05 (金) 15:51:10 | 最終更新:2014-12-05 (金) 15:51:10

3.5.1ja のマルチサイト設定 -> サブディレクトリ編

Posted by muchag | WordPress |
初回投稿:2013-04-21 (日) 18:56:42 | 最終更新:2013-04-21 (日) 18:57:31

WordPress 3.1系では、うまくいったマルチサイト化
3.5.1ja を入れようとしたらリダイレクト設定ではまったのでメモ。

【環境】
[WordPress]
3.5.1ja
症状

親サイトは問題が出なかったものの、子サイトのダッシュボードにアクセスしようとすると
Firefox, Chrome 共に、リダイレクトのループが起きている
という問題に陥った。
 

原因(予想)

サイト内でサブドメインを利用していたことのようだった。
(当たり前っちゃ当たり前か・・・反省)

マルチサイト設定を行った際に、WordPress から提示される .htaccess の内容について
WordPress は偉いので、さくらレンタルサーバの私のルートディレクトリ
www/
に配置すべき .htaccess の内容を記述してくれていたが
今回のインストール先は
www/hoge/wordpress/
であり、そちらにサブドメインを指定していたので
アクセスする際には、サブドメインのルートディレクトリが基準になる。
 

解決方法

というわけで、WordPress が提示してくれた

  1. RewriteEngine On
  2. RewriteBase /
  3. RewriteRule ^index\.php$ - [L]
  4.  
  5. # add a trailing slash to /wp-admin
  6. RewriteRule ^([_0-9a-zA-Z-]+/)?wp-admin$ $1wp-admin/ [R=301,L]
  7.  
  8. RewriteCond %{REQUEST_FILENAME} -f [OR]
  9. RewriteCond %{REQUEST_FILENAME} -d
  10. RewriteRule ^ - [L]
  11. RewriteRule ^([_0-9a-zA-Z-]+/)?(wp-(content|admin|includes).*) hoge/wordpress/$2 [L]
  12. RewriteRule ^([_0-9a-zA-Z-]+/)?(.*\.php)$ hoge/wordpress/$2 [L]
  13. RewriteRule . index.php [L]

 
のうち、11,12行目を変更し
 

  1. RewriteRule ^([_0-9a-zA-Z-]+/)?(wp-(content|admin|includes).*) $2 [L]
  2. RewriteRule ^([_0-9a-zA-Z-]+/)?(.*\.php)$ $2 [L]

 
とすることで、リダイレクトのループエラーを回避することができた。
 

参考元サイト

WordPress 日本語 フォーラム:[解決済み] WordPress3.5のマルチサイトで子サイトのダッシュボードにアクセスできない
freefielder.jp:WordPress 3.5 をマルチサイト化したらループ地獄に陥ったので直す。

Posted by muchag | WordPress |
初回投稿:2013-04-21 (日) 18:56:42 | 最終更新:2013-04-21 (日) 18:57:31

XAMPP 1.7.3 へインストール

Posted by muchag | OpenPNE 3.x |
初回投稿:2012-04-30 (月) 21:24:53 | 最終更新:2015-01-24 (土) 2:45:35

XAMPP 1.8.1 へインストール
こちらの方が新しい記事。
 
まずはローカルへのインストールから。

【環境】
[XAMPP] 1.7.3
[symfony] 1.4
[OpenPNE] 3.8.0

OpenPNE3.8 セットアップ手順 に従って作業。
 

DL

http://www.openpne.jp/pne-downloads/ より github へ移動し、ソースを DL 。

ZIP ファイルを DL してきた。
2012-04-30 現在
openpne-OpenPNE3-OpenPNE-3.8.0-0-g8c3a808.zip
 

インストール
配置
XAMPP ディレクトリ/htdocs

と同階層へ配置。

ディレクトリ名を適宜変更。
 

設定ファイル
OpenPNE3 ディレクトリ/config/OpenPNE.yml.sample
OpenPNE3 ディレクトリ/config/ProjectConfiguration.class.php.sample

以上2ファイルをコピーして .sample の部分をファイル名から消去し、設定ファイルを作成。
 

OpenPNE3 ディレクトリ/config/OpenPNE.yml
base_url
  1. # SNS の URL
  2. # URL of the SNS
  3. base_url: "http://localhost/openpne3"

 

DB:テーブルプレフィクス
  1. # テーブル名のプレフィックス (例: table_prefix: "op_")
  2. # Table name prefix (e.g: table_prefix: "op_")
  3. table_prefix: ""
  4. table_prefix: "op_"

推奨通り 190行目を op_ に設定。
 

symfony コマンド

私は PHP へのパスを通していないので、
手順書にちょっと手を加えて、PHP へのフルパスから記述。

  1. >I:\xampp\php\php.exe symfony openpne:install

* 使用する DBMS (mysql, pgsql, sqlite から選択。ただし mysql 以外は未サポート)
* データベース名
* データベースへの接続用ユーザ名
* データベースへの接続用パスワード(未入力可)
* データベースサーバのホスト名(localhost など)
* データベースサーバのポート番号(未入力可)
* (DBMS に MySQL を選択し、サーバホスト名に localhost を指定した場合)使用するソケットへのパス(未入力可)

手順書には上記順序で記載されていたが
実際は
* 使用する DBMS
* データベースへの接続用ユーザ名
* データベースへの接続用パスワード(未入力可)
* データベースサーバのホスト名(localhost など)
* データベースサーバのポート番号(未入力可)
* データベース名
* 使用するソケットへのパス(未入力可)
の順で入力。

最後に (Y/n) で聞かれるので、y を入力して Enter を叩くと
ズラズラとログが流れ
>> installer installation is completed!
と表示され、インストールが完了する。
 

開発環境用ファイルを削除
  1. >I:\xampp\php\php.exe symfony project:clear-controllers

 

設定
Posted by muchag | OpenPNE 3.x |
初回投稿:2012-04-30 (月) 21:24:53 | 最終更新:2015-01-24 (土) 2:45:35

OpenPNE 2.x Index

Posted by muchag | OpenPNE 2.x |
初回投稿:2012-04-30 (月) 20:39:42 | 最終更新:2012-04-30 (月) 20:39:42

WordPress やら XOOPS やら、CMS はすごいな~と思っていたけど
まさか SNS 構築用のオープンソースプロジェクトまであるとは。。。

 
 
では~ スタート~!!
 

OpenPNE 2.x Index

丸っきりの書きかけ項目は Not found になる。

序章
  1. インストール

 

参考

公式

その他各参考サイトについては、各エントリーにて。

Posted by muchag | OpenPNE 2.x |
初回投稿:2012-04-30 (月) 20:39:42 | 最終更新:2012-04-30 (月) 20:39:42

自動リンク解除

Posted by muchag | PukiWiki |
初回投稿:2011-12-03 (土) 14:34:32 | 最終更新:2011-12-03 (土) 14:35:30

PukiWiki はとっても便利。

が、ときにはこれが邪魔になることもあるね~。

今回はその1つ、単語に勝手にページ作成用のリンクを貼ってくれる機能。

Memcached? のように
専門用語っぽいものには、ページ作成用のリンクが自動的に付加されちゃう。

前々から、これや嫌だなぁ と思っていたけれども
検索キーワードが上手く見つけられず
本日ようやく解決策を発見。

PukiWiki 公式? 質問箱4/91

pukiwiki.ini.php
  1. /////////////////////////////////////////////////
  2. // _Disable_ WikiName auto-linking
  3. $nowikiname = 0;

この値を 1 にしてやると、自動リンクが付加されなくなる。

Posted by muchag | PukiWiki |
初回投稿:2011-12-03 (土) 14:34:32 | 最終更新:2011-12-03 (土) 14:35:30

PlugIn -> geshi.inc.php

Posted by muchag | Library & PlugIn & AddIn,PukiWiki |
初回投稿:2011-10-18 (火) 14:06:27 | 最終更新:2011-10-18 (火) 14:09:31

WordPress でも利用させていただいているシンタックスハイライターの Geshi
plugin -> iG:Syntax Hiliter カスタマイズ

Pukiwiki でも利用できるようなので設定。

DL
Geshi

Geshi の Downloads をクリックすると
Sourceforge に飛ぶので、そこから DL 。
 

geshi.inc.php

PukiWiki/自作プラグイン/GeSHi より DL 。
2011-10-18 現在
geshi-1.3.tar.gz
 

詳細

PukiWiki/自作プラグイン/GeSHi 参照。

Posted by muchag | Library & PlugIn & AddIn,PukiWiki |
初回投稿:2011-10-18 (火) 14:06:27 | 最終更新:2011-10-18 (火) 14:09:31

Welcart

Posted by muchag | Library & PlugIn & AddIn,WordPress |
初回投稿:2011-07-16 (土) 13:48:44 | 最終更新:2011-07-16 (土) 13:49:20

DL &インストール
DL

Welcart 公式 のヘッダバナー
あるいは ダウンロード より DL 。

2011-07-16 現在、ヴァージョン 1.0.4
usc-e-shop.1.0.4.zip

Posted by muchag | Library & PlugIn & AddIn,WordPress |
初回投稿:2011-07-16 (土) 13:48:44 | 最終更新:2011-07-16 (土) 13:49:20

インストール

Posted by muchag | EC-CUBE,XAMPP |
初回投稿:2011-07-11 (月) 17:55:19 | 最終更新:2011-07-11 (月) 18:05:58

今回はお試しなので
ひとまず XAMPP にインストールして使ってみることにした。

【環境】
[XAMPP] 1.7.3
[EC-CUBE] 2.11.1
XAMPP 関連

XAMPP 関連は こちら

 

DB
選択

EC-CUBE では、DB は、PostgreSQLMySQL か選択できる。

ただ、開発自体は PostgreSQL で行われているそうで
PostgreSQL を利用する方がエラーが少ないそうだ。

それを聞いて私も PostgreSQL に挑戦してみたが
残念ながら上手くいかなかったので、今回は MySQL にて利用することにした。
 

MySQL

EC-CUBE 用のデータベースを1つ作成する。
名称は任意。
 
照合順序を utf8_general_ci にすることを忘れずに。
 

DL

EC-CUBE の公式サイト EC-CUBE ダウンロード より
正式版 .zip ファイルを DL 。

2011-07-11 現在、ヴァージョンは 2.11.1 。
eccube-2.11.1.zip
 

インストール

解凍して出てきたフォルダ「eccube-2.11.1」を
htdocs 直下に eccube とリネームして配置。

http://localhost/eccube/html/install/
にアクセス。
 

 

 

 

 
ここで「DB の種類」にて MySQL を選択。

MySQL の場合、ポートは空欄でOK。

「DB 名」は先ほど設定した名称。

「DB ユーザ」と「DB パスワード」は
新しく設定するのではなく、いつも接続に利用しているもの。

 

 

 

 

 

問題が発生したため、Apache HTTP Server を終了します。
ご不便をおかけして申し訳ありません。

エラー署名
szAppName : httpd.exe szAppVer : 2.2.14.0 szModName : php5ts.dll
szModVer : 5.3.1.0 offset : 00082bba

 
ここまで進めて、次へ行こうとしたら
左のようなエラーメッセージが出た。

それでもこの先進めるのだが
ページ移動をする度にこのエラーメッセージが出る。

直し方不明・・・。

 

Posted by muchag | EC-CUBE,XAMPP |
初回投稿:2011-07-11 (月) 17:55:19 | 最終更新:2011-07-11 (月) 18:05:58
« 前ページへ次ページへ »