Sandbox/code2

hidhlight.jsを使用したソース色分け

• スタイル： monokai-sublime
• 行番号表示： Line numbering plugin for Highlight.js

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

.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

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';
	}
}