!!![hidhlight.js|https://highlightjs.org/]を使用したソース色分け

*スタイル: monokai-sublime
*行番号表示: [Line numbering plugin for Highlight.js|https://wcoder.github.io/highlightjs-line-numbers.js/]

----
HTML
{{layout code2,html
  <!--TMPL_VAR NAME="MENU"-->
  <h1><!--TMPL_VAR NAME="TITLE"--></h1>
  
  <!--TMPL_IF NAME="EXIST_PAGE_Menu"-->
    <div class="main">
  <!--/TMPL_IF-->
  
  <!--TMPL_UNLESS NAME="EDIT_MODE"-->
    <!--TMPL_IF NAME="EXIST_PAGE_Header"-->
      <div class="header">
        <!--FSWIKI_INCLUDE PAGE="Header"-->
      </div>
    <!--/TMPL_IF-->
  <!--/TMPL_UNLESS-->
  
  <div class="day">
    <div class="body">
      <div class="section">
        <!--TMPL_VAR NAME="CONTENT"-->
      </div>
    </div>
    <!--TMPL_UNLESS NAME="EDIT_MODE"-->
      <!--TMPL_IF NAME="EXIST_PAGE_Footer"-->
        <div class="comment">
          <!--FSWIKI_INCLUDE PAGE="Footer"-->
        </div>
      <!--/TMPL_IF-->
    <!--/TMPL_UNLESS-->
  </div>

  <!--TMPL_IF NAME="EXIST_PAGE_Menu"-->
    </div>
    <div class="sidebar">
      <!--FSWIKI_INCLUDE PAGE="Menu"-->
    </div>
  <!--/TMPL_IF-->
  
  <!--TMPL_VAR NAME="FOOTER"-->
}}

----
CSS
{{layout code2,css
.code2 table, .code2 tr, .code2 td {
    border: none;
}
/* for block of numbers */
td.hljs-ln-numbers {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    text-align: center;
    color: #ccc;
    border-right: 1px solid #CCC;
    vertical-align: top;
    padding-right: 5px;

    /* your custom style here */
}

/* for block of code */
td.hljs-ln-code {
    padding-left: 10px;
}
}}
----
JavaScript
{{layout code2,javascript
function ajwiki(_span,_page,_img,_src) {
    var span = document.getElementById(_span);
    var img  = document.getElementById(_img);
    var src  = document.getElementById(_src);
    if (img.src.indexOf('/fswiki/layout/rollout/close.png') > -1) {
        req.open("GET", "<!--TMPL_VAR NAME='SCRIPT_NAME'-->?action=AJWIKI&page=" + _page, false);
        req.send(null);
        if (req.readyState == 4) {
            if (req.status == 200) {
                document.getElementById(_src).innerHTML = req.responseText;
                span.title = 'クリックすれば閉じます';
                img.src = '/fswiki/layout/rollout/open.png';
                src.style.display = '';
            } else {
                alert("リソースの取得に失敗しました\n"+ 
                req.status +" "+ req.statusText + "\n" + req.responseText);
            }
        }
    } else {
        span.title = 'クリックすれば開きます';
        img.src = '/fswiki/layout/rollout/close.png';
        src.style.display = 'none';
    }
}
}}