prism.js(1.23.0)を WordPress で利用する

Posted by muchag | Library & PlugIn & AddIn,WordPress |
初回投稿:2021-04-01 (木) 15:11:10 | 最終更新:2021-04-01 (木) 15:48:51

前回 の導入から4年。
prism.js も成長しただろうし
私の言語も広がってきたので
再度導入してみる。

公式:Prism

【環境】
PrismJS: 1.23.0
WordPress: 5.7
導入
設定

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

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

  • Compression level:
    • カスタマイズをしたいので、[Development version] を選択
  • Core
  • Themes
    • ダークテーマが好きなので、[Okaidia]
  • Languages
    • ☑ Select/unselect all
  • Plugins
    • 次項参照
プラグイン

せっかく Diff を導入したので、そちらで記述してみる。


Line Highlight
Line Numbers
Autolinker
+ Custom Class
Show Language
JSONP Highlight
Highlight Keywords
Remove initial line feed
+ Inline color
+ Keep Markup
Command Line
Unescaped Markup
+ Data-URI Highlight
Toolbar
+ Copy to Clipboard Button
+ Match braces
+ Diff Highlight
+ Treeview
参考サイト

Blogger.comにPrism.jsをCDNで導入する(2020-11-20)

容量

言語追加の方法がわからないので
今回はフル選択してみた。
時代は、5G だしね!
Total filesize: 768.93KB (98% JavaScript + 2% CSS)
ぎゃー!重い・・・
ちなみに前回は
Total filesize: 146.01KB (96% JavaScript + 4% CSS)

でも、読み込み速度はあんまり気にならない。
ラッキー♪

DL、配置、WordPress へ組み込み

prism.js(1.9.0)を WordPress で利用する 参照。

利用

prism.js(1.9.0)を WordPress で利用する 利用 参照。

Keep Markup

(おそらく)今回 Keep Markup プラグインを追加したおかげで
HTML コードを表現する際に < > をエスケープする必要がなくなった。

今まで

< > をエスケープする必要があった。


<pre class="line-numbers" data-language="HTML" data-start="" data-line="">
<code class="language-markup">
&lt;p&gt;Example&lt;/p&gt;
</code>
</pre>
これから

<pre class="line-numbers" data-language="HTML" data-start="" data-line="">
<code class="language-markup">
<p>Example</p>
</code>
</pre>
で!

過去記事の表示が崩れてるんだろうな・・・。

Posted by muchag | Library & PlugIn & AddIn,WordPress |
初回投稿:2021-04-01 (木) 15:11:10 | 最終更新:2021-04-01 (木) 15:48:51

Classic Editor

Posted by muchag | WordPress |
初回投稿:2018-12-07 (金) 13:54:52 | 最終更新:2018-12-07 (金) 15:33:44

【環境】
Classic Editor: 1.1
WordPress: 5.0.0
Gutenberg

本日、WordPress に記事を書いていたら
WordPress 更新のアラートが出ていた。

早速更新してみると、エディタがえらいことに!

なにこれ?!
と思って、Google 先生へ質問してみると
5.0.0 から、Gutenberg という新しいエディタになったそうな。

AddQuicktag を利用して設定してきたカスタムタグを含めて
リッチテキストエディタがゴッソリなくなっていた。 😥

Gutenberg プラグインの説明を見ると、

ブロックは、今まで異なる方法でカバーされていた
「ショートコード」「埋め込み」「ウィジェット」「投稿フォーマット」
「カスタム投稿タイプ」「テーマオプション」「メタボックス」
その他のフォーマット要素などを統一的に進化させたものです。
ユーザーは、WordPress でできる幅広い機能を、明快で一貫した方法で利用できます。

とあるので、こちらでもカスタムタグを、しかもプラグインなしで利用できそうだけど
今は学習時間を確保できないので、以前のスタイルへ戻したい!

Classic Editor

それを実現できるのが、Classic Editor プラグインだそうな。

早速検索して入れてみると
見慣れた編集画面へ戻った。

ふぅ。。。

設定
  • 「すべてのユーザーのデフォルトエディター」
  • 「ユーザーにエディターの切り替えを許可します」
  • 項目が追加されている。

    手動切替

    上記の設定をしてあっても
    Gutenberg になっているときがあるので
    その際は、投稿画面の右サイドバーに「エディター」というカテゴリが追加されているので
    [クラシックエディターに切り替え] をクリックすると
    Classic Editor 画面になる。

    反対に、Gutenberg を試したくなったら
    [ブロックエディターに切り替え] で、Gutenberg 画面になる。

    Posted by muchag | WordPress |
    初回投稿:2018-12-07 (金) 13:54:52 | 最終更新:2018-12-07 (金) 15:33:44

    prism.js(1.9.0)を WordPress で利用する

    Posted by muchag | Library & PlugIn & AddIn,WordPress |
    初回投稿:2017-12-07 (木) 22:30:03 | 最終更新:2021-04-02 (金) 18:45:33

    今度こそ、長年愛用してきた 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

    Blogger.comにPrism.jsをCDNで導入する(2020-11-20)

    DL

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

    配置

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

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

    こちらだと、WordPress をアップデートする度に下記設定が消えてしまうので

    /wp-content/themes/[theme_name]/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">
    <script type=&quot;text/plain&quot; class=&quot;language-markup&quot;>
    <p>Example</p>
    </script>
    </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">
    <script type=&quot;text/plain&quot; class=&quot;language-markup&quot;>
    <p>Example</p>
    </script></code>
    </pre>
    
    HTML(MarkUp)

    上記改行も考慮しつつ試した結果
    最初と最後の行をコメント識別子と同じ行に記述する。

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

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

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

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

    行番号

    pre タグへ data-line 属性を記述。

    出力行

    class=”command-line” 時に data-output 属性を記述して、行番号を指定することで
    当該行へプロンプトを出さないように指定できる。

    data-filter-output

    data-filter-output 属性を記述して、任意の文字列を指定することで
    当該行へプロンプトを出さないように指定できる。

    行数が多かったり、後で変更が入ったときなど
    行番号を指定するのはナンセンスな場合に有効。

    参考サイト

    打ち聞かせ:シンタックスハイライター Prism JS を使用する(2019-01-20)コマンドライン表示する( Command Line plugin )

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

    公式: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 に書き換えて、アルファ値を調整した。

    文字色

    諸々調整。

    Posted by muchag | Library & PlugIn & AddIn,WordPress |
    初回投稿:2017-12-07 (木) 22:30:03 | 最終更新:2021-04-02 (金) 18:45:33

    Simple Membership

    Posted by muchag | WordPress |
    初回投稿:2016-01-23 (土) 22:27:13 | 最終更新:2016-01-23 (土) 22:27:13

    参考サイト

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

    Posted by muchag | WordPress |
    初回投稿:2016-01-23 (土) 22:27:13 | 最終更新:2016-01-23 (土) 22:27:13

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

    Posted by muchag | Library & PlugIn & AddIn,WordPress |
    初回投稿:2015-09-01 (火) 16:52:52 | 最終更新:2015-09-04 (金) 17:01:01

    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. }
    Posted by muchag | Library & PlugIn & AddIn,WordPress |
    初回投稿:2015-09-01 (火) 16:52:52 | 最終更新:2015-09-04 (金) 17:01:01

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

    Posted by muchag | WordPress |
    初回投稿:2015-03-17 (火) 20:32:05 | 最終更新: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。

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

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

    Posted by muchag | WordPress |
    初回投稿:2015-03-17 (火) 20:32:05 | 最終更新:2015-03-17 (火) 20:32:05

    Commented entry list -> 3.0 対応

    Posted by muchag | WordPress |
    初回投稿:2015-03-08 (日) 14:09:40 | 最終更新: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 日本語版 リリース

    Posted by muchag | WordPress |
    初回投稿:2015-03-08 (日) 14:09:40 | 最終更新:2015-03-08 (日) 14:09:40

    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
    次ページへ »