prism の行数指定の仕方 2018-12-18 (火) 07:51:00+09:00

ソフトウェア

ソースコードの表示に便利な prism だが、一つだけ不便な点がある。

そのままだと、ソースコードの全ての行を表示する大きさで表示してしまう。これだと、短い行数のソースコードの場合はいいが、長い場合はちと困る。

行番号表示の場合、記事中の <pre> タグの要素として class=”line-numbers” と書けば行番号が表示されるようになるが、どうやらソースコード表示枠に表示する行数そのものを指定する方法は無く、しかし、 css で max-height プロパティに em 単位で数値を指定することで、 font-size プロパティで指定されている高さに対する倍率として指定することでソースコード表示枠の高さを変更でき、結果的に表示行数をコントロールすることができると分かった。

参考にした「JavaScript Prism.js: 表示する行数を指定する」のように、 prism.css を、


pre[class*="language-"] > code{
    max-height: 32em;
    overflow: auto;
}

のように修正し max-height プロパティの値を指定しても確かに実現出来るのだが、これだと、そのサイトで表示される全てのソースコード表示枠の高さが固定になってしまうので具合が悪い。

そうではなく、記事中にソースコードを埋め込む際に挿入する <pre> タグに、


<pre class="line-numbers" styles="max-height: calc(16px*1.5*31);">

のようにして、 <pre> タグの要素としてスタイルシートを埋め込むことで、ソースコード枠ごとに好きな高さを設定することができる。(現在のバージョンの prism では、 <code> タグに対し、 mex-height: inherit; と指定されているため。)

ちなみに、1行の正確な高さを取得して、「その31行分」のように max-height を指定できないか、いろいろ試してみた。行高さを指定するプロパティ line-height があるが、 css では、


<pre styles="max-height: calc(line-height*31);">

のような書き方は出来ないようだ。非常に不便だが、上の例のように、ソースコード枠を表示したい場所での行高さを、即値を用いた計算で(それでも calc が使えるだけマシか)求め指定するしかないようだ。( css のこのあたりの不便さはなんとかならないものか。)

また、ソースコードが表示枠からはみ出る場合にスクロールバーを出すためには、 overflow: auto; が必要だが、現在のバージョンでは prism をダウンロードした状態で既にそのように設定されているようなので修正不要。

キーワード: prism 行数指定


こちらを参考に、「ブログにタグクラウドを追加してみた」の記事のソースコードの表示を、 prism にしてみた。

code-prettify と違い、 php にも対応しているので使いやすい。関数名に好きな色をつけたいと思って SyntaxHighlighter はどうかと試していたところだったので、ちょうどよかった。(ちなみに、 SyntaxHighlighter はいろいろなサイトの記事を参考に設置を試みたが、当サイトではどうやっても表示させることができなかった。)

導入はとても簡単で、 prism のサイトで使用する言語やプラグイン、テーマを指定し、 prism.css と prism.js をダウンロードしたら、 <head> ~ </head> の間で prism.css を下のように読み込み、


<link rel="stylesheet" href="prism/prism.css"/>

次に、 </body> の直前で、 prism.js を下のように読み込むだけだ。


<script src="prism/prism.js"></script>

既に公開した記事のソースコード表示も含め、順次置き換えていこうと思う。


これまでに何度か google code-prettify を用いて記事中にソースコードを挿入してみて、コツが分かってきたのでメモしておく。

(1)ソースコード以外の部分を入力し、 Wysiwyg 表示モードで確認しておく。

(2)ソース表示モードにして、

(a) ”<pre><code class=”prettyprint linenums lang-*”>”

(b) “</code></pre>”

を入力する。( lang-* の * の部分は、貼りつけたいソースコードの種類から、 code-prettify が持っている lang-* の中から最も近い構文のものを選ぶ。(例) “lang-css” など)

(3) (a) と (b) で囲まれた部分に、ソースコードを貼りつける。貼りつけるソースコードの改行はテキストの状態で改行しておく改行コードは LF だと余計な改行が勝手に追加されてしまうので、 CRLF にする。1行目は (a) の直後に改行せずつないで書き、最終行は (b) の直前にこちらも改行せずつないで書く。(そうしないと、空白行が出来てしまう。)

(4)ソースコードを挿入したら、 Wysiwyg 表示モードなどに切り替えず、ソース表示モードにしたまま、記事を投稿する。(モードを切り替えてしまうと、ソースコードの改行が削除され、ずらずら1行につながってしまう。

これで、きれいにソースコードが挿入される。



「銀杏の木」の左側に、タグクラウドを追加した。

任意で記事に設定する Keys タグのキーワードが何個設定されているかをカウントして表示し、リンクをクリックするとその言葉で検索する形にしてみた。  Keys タグに出てきた数なので、実際の記事中に出現する回数ではない。

この追加のために、 rnote.php 本体と、プラグインの navitools.php, スキンファイルの html.side.skin に変更を加え、 file.cache に書き込まれるエントリに、 Keys タグの内容も追加するようにして実現させた。

navitools.php のプラグインには、新たに、 “tag_cloud” を追加し、

<%=$plugin name="navitools" func="tag_cloud" opt="min_count=3,max_size=200" %>

のような形で呼び出せるようにした。追加した tag_cloud は下の通り。


    //==========================================================================
    // タグクラウド Added by Crabfish
    //==========================================================================
    function tag_cloud($opt)
    {
        global $g_keyslist;            // キーごとの設定回数情報

        //echo 'opt=['.$opt.']<br />';
        //opt に設定されている値を取得する。
        $min_count = 1;
        $max_size = 200;
        if (isset($opt)) {
            $tok = strtok($opt, ",");
            while ($tok) {
                list($lvalue, $rvalue) = explode("=", $tok, 2);
                //echo 'lvalue=['.$lvalue.'] rvalue=['.$rvalue.']<br />';
                switch ($lvalue) {
                case 'min_count':
                    $min_count = intval($rvalue);
                    if ($min_count < 1) $min_count = 1;
                    break;
                case 'max_size':
                    $max_size = intval($rvalue);
                    if ($max_size < 100) $max_size = 100;
                    break;
                }
                $tok = strtok(",");
            }
        }
        //echo 'min_count=['.$min_count.']<br />';
        //echo 'max_size=['.$max_size.']<br />';
        $min = 65536;
        $max = 0;
        //キーの出現回数の最大値、最小値を取得する。
        foreach ($g_keyslist as $k => $v) {
            if ($max < $v) $max = $v;
            if ($min > $v) $min = $v;
        }
        $dif = (($max - $min) > 0) ? ($max - $min) : 1;
        $i = 0;
        $rep = '';
        foreach ($g_keyslist as $k => $v) {
            if ($v >= $min_count) {
                $rep .= '<span class="key"><a style="font-size: '.(($v-$min)/$dif*100+($max_size-100)).'%; line-height: 150%; white-space: nowrap;" href="/ichounoki/rnote/';
                $rep .= MakeLinkUrl().'?m=search&cache=off&q='.$k.'&u=&cmt=1∧=1';
                $rep .= '">'. $k . '</a></span> ';
            }
            $i++;
        }
    
        return $rep;
    }

    //==========================================================================
    // タグクラウド Added by Crabfish
    //==========================================================================
    function tag_cloud($opt)
    {
        global $g_keyslist;            // キーごとの設定回数情報

        //echo 'opt=['.$opt.']<br />';
        //opt に設定されている値を取得する。
        $min_count = 1;
        $max_size = 200;
        if (isset($opt)) {
            $tok = strtok($opt, ",");
            while ($tok) {
                list($lvalue, $rvalue) = explode("=", $tok, 2);
                //echo 'lvalue=['.$lvalue.'] rvalue=['.$rvalue.']<br />';
                switch ($lvalue) {
                case 'min_count':
                    $min_count = intval($rvalue);
                    if ($min_count < 1) $min_count = 1;
                    break;
                case 'max_size':
                    $max_size = intval($rvalue);
                    if ($max_size < 100) $max_size = 100;
                    break;
                }
                $tok = strtok(",");
            }
        }
        //echo 'min_count=['.$min_count.']<br />';
        //echo 'max_size=['.$max_size.']<br />';
        $min = 65536;
        $max = 0;
        //キーの出現回数の最大値、最小値を取得する。
        foreach ($g_keyslist as $k => $v) {
            if ($max < $v) $max = $v;
            if ($min > $v) $min = $v;
        }
        $dif = (($max - $min) > 0) ? ($max - $min) : 1;
        $i = 0;
        $rep = '';
        foreach ($g_keyslist as $k => $v) {
            if ($v >= $min_count) {
                $rep .= '<span class="key"><a style="font-size: '.(($v-$min)/$dif*100+($max_size-100)).'%; line-height: 150%; white-space: nowrap;" href="';
                $rep .= MakeLinkUrl().'?m=search&cache=off&q='.$k.'&u=&cmt=1∧=1';
                $rep .= '">'. $k . '</a></span> ';
            }
            $i++;
        }
    
        return $rep;
    }

min_count は、タグクラウドに表示させる最小出現回数。これ未満の回数のものは表示しない。

max_size は、タグクラウドを表示する際に、タグの出現回数に応じてフォントサイズを変えるようにしたので、その際の最大表示パーセント値。最小サイズは100%固定にした。

タグクラウドは一時期のように流行ってはいないが、実装作業は楽しかった。

[コメントの受付は終了しています ]
この記事のリンク元 | 1 |