コードに行番号を付ける
dokuwikiの<CODE>タグではデフォルトで行番号が付きません。なので、行番号を付けようと思います。
以下に例を示します。
$(window).on('load', function () {
if ($.cookie('adFlg2') != 'on' && $('#modal-ad').length) {
//画面読み込み500ms後にモーダル表示
setTimeout(function () {
//$('#modal-ad').modal('show');
}, 500);
$.cookie('adFlg2', 'on', {expires: 2, path: '/'}); //1日保存
}
});
この変更は、https://note.affi-sapo-sv.com/js-add-line-number.phpを参考にしました。
また、bootstrap3テンプレートを使用したときの例です。
まず、テンプレート内のmain.phpを探します（bootsrap3テンプレートではmain.php）。このmain.phpのheadタグに以下のように追記します。
以下の23行目が追記行
<head>
<meta charset="UTF-8" />
<title><?php echo $TPL->getBrowserPageTitle() ?></title>
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<?php
if ($TPL->getConf('themeByNamespace')) {
echo '<link href="' . tpl_basedir() . 'css.php?id='. $ID .'" rel="stylesheet" />';
}
echo tpl_favicon(['favicon', 'mobile']);
tpl_includeFile('meta.html');
tpl_metaheaders();
?>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5424273742060234"
crossorigin="anonymous"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script type="text/javascript" src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script async src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
</head>
次にinc\parser\xhtml.phpを変更します。
/** * Use GeSHi to highlight language syntax in code and file blocks * * @author Andreas Gohr <andi@splitbrain.org> * @param string $type code|file * @param string $text text to show * @param string $language programming language to use for syntax highlighting * @param string $filename file path label * @param array $options assoziative array with additional geshi options */ public function _highlight($type, $text, $language = null, $filename = null, $options = null) { global $ID; global $lang; global $INPUT; （中略） if(empty($language)) { // empty is faster than is_null and can prevent '' string $this->doc .= '<pre class="prettyprint linenums '.$type.'">'.$this->_xmlEntities($text).'</pre>'.DOKU_LF; } else { $class = 'code prettyprint linenums '; //we always need the code class to make the syntax highlighting apply if($type != 'code') $class .= ' '.$type; $this->doc .= "<pre class=\"$class $language\">" . p_xhtml_cached_geshi($text, $language, '', $options) . '</pre>' . DOKU_LF; }
_highlight関数内の
$this->doc .= '<pre class="prettyprint linenums '.$type.'">'.$this->_xmlEntities($text).'</pre>'.DOKU_LF;
$class = 'code prettyprint linenums '; //we always need the code class to make the syntax highlighting apply
が変更点です。いずれも、「prettyprint linenums」クラスを追加しています。
あとは、テンプレートCSSに以下を追加すればOK.bootstrap3テンプレートでは、bootstrap.min.cssです。
.prettyprint{ /* 枠線 */ border-left: 5px solid green; padding: 0; } .prettyprint ol.linenums{ list-style:none; counter-reset: linenums_count; overflow: hidden; position: relative; padding:0; margin:0; } .prettyprint ol.linenums > li{ /* 表示されるテキスト */ padding:0 5px 0 50px; /* 行番号の幅を変更するときは、*/ /* 4つめのpxを調整する */ } .prettyprint ol.linenums > li:before{ /* 行番号 */ counter-increment: linenums_count; content: counter(linenums_count); width: 40px; /* 行番号の幅 */ text-align: right; display: block; position: absolute; left: 0; border-right: 2px solid #ccc; border-top:1px solid #ccc; padding-right:3px; background: white; }
変更箇所はこんなもんです。
ただ、この場合だと全てのcodeもしくはfileシンタックスに行番号が適用されますのでご注意下さい。