コードに行番号を付ける

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シンタックスに行番号が適用されますのでご注意下さい。

目次

コードに行番号を付ける