wiki:dokuwiki:コードに行番号を付ける

コードに行番号を付ける

dokuwikiの<CODE>タグではデフォルトで行番号が付きません。なので、行番号を付けようと思います。
以下に例を示します。 

  1. $(window).on('load', function () {
  2.     if ($.cookie('adFlg2') != 'on' && $('#modal-ad').length) {
  3.       //画面読み込み500ms後にモーダル表示
  4.       setTimeout(function () {
  5.         //$('#modal-ad').modal('show');
  6.       }, 500);
  7.       $.cookie('adFlg2', 'on', {expires: 2, path: '/'}); //1日保存
  8.     }
  9.   });

この変更は、https://note.affi-sapo-sv.com/js-add-line-number.phpを参考にしました。
また、bootstrap3テンプレートを使用したときの例です。

まず、テンプレート内のmain.phpを探します（bootsrap3テンプレートではmain.php）。このmain.phpのheadタグに以下のように追記します。
以下の23行目が追記行 

  1. <head>
  2.     <meta charset="UTF-8" />
  3.     <title><?php echo $TPL->getBrowserPageTitle() ?></title>
  4.     <script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
  5.     <meta name="viewport" content="width=device-width,initial-scale=1" />
  6.     <?php
  7.  
  8.         if ($TPL->getConf('themeByNamespace')) {
  9.             echo '<link href="' . tpl_basedir() . 'css.php?id='. $ID .'" rel="stylesheet" />';
  10.         }
  11.  
  12.         echo tpl_favicon(['favicon', 'mobile']);
  13.         tpl_includeFile('meta.html');
  14.         tpl_metaheaders();
  15.  
  16.     ?>
  17.     <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5424273742060234"
  18.      crossorigin="anonymous"></script>
  19.     <!--[if lt IE 9]>
  20.     <script type="text/javascript" src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  21.     <script type="text/javascript" src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  22.     <![endif]-->
  23.     <script async src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
  24. </head>

次にinc\parser\xhtml.phpを変更します。

  1.     /**
  2.      * Use GeSHi to highlight language syntax in code and file blocks
  3.      *
  4.      * @author Andreas Gohr <andi@splitbrain.org>
  5.      * @param string $type     code|file
  6.      * @param string $text     text to show
  7.      * @param string $language programming language to use for syntax highlighting
  8.      * @param string $filename file path label
  9.      * @param array  $options  assoziative array with additional geshi options
  10.      */
  11.     public function _highlight($type, $text, $language = null, $filename = null, $options = null) {
  12.         global $ID;
  13.         global $lang;
  14.         global $INPUT;
  15.         （中略）
  16.         if(empty($language)) { // empty is faster than is_null and can prevent '' string
  17.             $this->doc .= '<pre class="prettyprint linenums '.$type.'">'.$this->_xmlEntities($text).'</pre>'.DOKU_LF;
  18.         } else {
  19.             $class = 'code prettyprint linenums '; //we always need the code class to make the syntax highlighting apply
  20.             if($type != 'code') $class .= ' '.$type;
  21.  
  22.             $this->doc .= "<pre class=\"$class $language\">" .
  23.                 p_xhtml_cached_geshi($text, $language, '', $options) .
  24.                 '</pre>' . DOKU_LF;
  25.         }

_highlight関数内の 

  1. $this->doc .= '<pre class="prettyprint linenums '.$type.'">'.$this->_xmlEntities($text).'</pre>'.DOKU_LF;
  1. $class = 'code prettyprint linenums '; //we always need the code class to make the syntax highlighting apply

が変更点です。いずれも、「prettyprint linenums」クラスを追加しています。

あとは、テンプレートCSSに以下を追加すればOK.bootstrap3テンプレートでは、bootstrap.min.cssです。 

  1. .prettyprint{ /* 枠線 */
  2.     border-left: 5px solid green;
  3.     padding: 0;
  4.   }
  5.   .prettyprint ol.linenums{
  6.     list-style:none;
  7.     counter-reset: linenums_count;
  8.     overflow: hidden;
  9.     position: relative;
  10.     padding:0;
  11.     margin:0;
  12.   }
  13.   .prettyprint ol.linenums > li{ /* 表示されるテキスト */
  14.     padding:0 5px 0 50px;  /* 行番号の幅を変更するときは、*/
  15.                                      /* 4つめのpxを調整する */
  16.   }
  17.   .prettyprint ol.linenums > li:before{ /* 行番号 */
  18.     counter-increment: linenums_count;
  19.     content: counter(linenums_count);
  20.     width: 40px;   /* 行番号の幅 */
  21.     text-align: right;
  22.     display: block;
  23.     position: absolute;
  24.     left: 0;
  25.     border-right: 2px solid #ccc;
  26.     border-top:1px solid #ccc; 
  27.     padding-right:3px;
  28.     background: white;
  29.   }

変更箇所はこんなもんです。
ただ、この場合だと全てのcodeもしくはfileシンタックスに行番号が適用されますのでご注意下さい。

  • wiki/dokuwiki/コードに行番号を付ける.txt
  • 最終更新: 2024/11/04 00:47
  • by 127.0.0.1