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