2017年3月20日月曜日

SyntaxHilighterが素晴らしいのでさらにもう一工夫 - サーバ不要でハイライト

前の記事でcgiとして閲覧する際にjavascriptなしでも文法強調済みのﾃｷｽﾄを生成する無用の長物を作ってみました。
が、よくよく考えたら作成時でもhttpサーバなしで、ﾌﾞﾗｳｻﾞだけで文法強調済みﾃｷｽﾄを生成できますよねえ。

というわけで、ローカルファイルとして保存したhtmlファイルをローカルでブラウザで開いて、ハイライト済みﾃｷｽﾄを生成するhtmlファイルを作ってみました。

使い方は、

  1. htmlファイルをどこでもいいので保存します。
  2. syntaxhighlighter_3.0.83をダウンロードして、htmlファイルを保存した場所にディレクトリ構造はそのままで展開して、
    　./保存したhtmlファイル
    　./syntaxhighlighter_3.0.83/scripts
    　./syntaxhighlighter_3.0.83/styles
    が存在するようにしてください。他は削除してかまいません。
  3. firefoxでローカルのhtmlファイルを開きます。
firefox以外のchromeやedgeですと、ローカルﾌｧｲﾙを扱う権限がﾃﾞﾌｫﾙﾄでは与えられませんので、ご利用の際にひと手間増えてしまいます。
オプションをつけて起動したりhttpdを立てたり回避する手段はいろいろありますが、そもそも使わなければいいので回避方法は割愛します。


ハイライト済みﾃｷｽﾄの生成方法は、

  1. 入力欄にソースをコピーします。
  2. ラジオボタンでスタイルと言語(ブラシ)を選びます。
  3. ハイライト実行ボタンを押します。
  4. スタイルとハイライト済みﾃｷｽﾄがﾃｷｽﾄエリアに表示されますので、両者を好きなところにペーストします。
    スタイルはheadかbodyの一番上あたりがよろしいかと思います。
    ハイライト済みﾃｷｽﾄは、もちろん記事としてふさわしい場所にどこでもペーストしてください。
そのhtmlファイルの内容は以下の通りです。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>サーバなしでハイライト済みﾃｷｽﾄを生成するページ</title>
  <meta charset="utf-8" />
     
  <script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shCore.js"></script>
 
  <script type="text/javascript">
    var version = "syntaxhighlighter_3.0.83";
    var brushes = {
      'ActionScript3': ['as3', 'shBrushAS3.js', ],
      'Bash/shell': ['bash', 'shBrushBash.js', ],
      'ColdFusion': ['cf', 'shBrushColdFusion.js', ],
      'C#': ['c-sharp', 'shBrushCSharp.js', ],
      'C++': ['cpp', 'shBrushCpp.js', ],
      'CSS': ['css', 'shBrushCss.js', ],
      'Delphi': ['delphi', 'shBrushDelphi.js', ],
      'Diff': ['diff', 'shBrushDiff.js', ],
      'Erlang': ['erl', 'shBrushErlang.js', ],
      'Groovy': ['groovy', 'shBrushGroovy.js', ],
      'JavaScript': ['js', 'shBrushJScript.js', ],
      'Java': ['java', 'shBrushJava.js', ],
      'JavaFX': ['jfx', 'shBrushJavaFX.js', ],
      'Perl': ['perl', 'shBrushPerl.js', ],
      'PHP': ['php', 'shBrushPhp.js', ],
      'Plain Text': ['plain', 'shBrushPlain.js', ],
      'PowerShell': ['ps', 'shBrushPowerShell.js', ],
      'Python': ['py', 'shBrushPython.js', ],
      'Ruby': ['ruby', 'shBrushRuby.js', ],
      'Scala': ['scala', 'shBrushScala.js', ],
      'SQL': ['sql', 'shBrushSql.js', ],
      'Visual Basic': ['vb', 'shBrushVb.js', ],
      'XML': ['xml', 'shBrushXml.js', ],
    };
    var styles = {
      "Default": ['shCoreDefault.css', 'shThemeDefault.css'],
      "Django": ['shCoreDjango.css', 'shThemeDjango.css'],
      "Eclipse": ['shCoreEclipse.css', 'shThemeEclipse.css'],
      "Emacs": ['shCoreEmacs.css', 'shThemeEmacs.css'],
      "FadeToGrey": ['shCoreFadeToGrey.css', 'shThemeFadeToGrey.css'],
      "MDUltra": ['shCoreMDUltra.css', 'shThemeMDUltra.css'],
      "Midnight": ['shCoreMidnight.css', 'shThemeMidnight.css'],
      "RDark": ['shCoreRDark.css', 'shThemeRDark.css'],
    };
 
    function toClipBoard(id) {
      var ele = document.getElementById(id);
      if (ele != null) {
        ele.select();
        document.execCommand("copy");
      }
    }
 
    function loadfile(fname) {
      try{
        var xmlHttp = new XMLHttpRequest();
        xmlHttp.overrideMimeType("text/plain");
        xmlHttp.open("GET", fname, false);
        xmlHttp.send(null);
        return xmlHttp.responseText;
      }
      catch (e) {
        return null;
      }
    }
    function loadStyle() {
      var eles = document.getElementsByName("style");
      for (i = 0; i < eles.length; i++) {
        if (eles[i].checked) {
          var fname = version + "/styles/" + styles[eles[i].value][0];
          var stylestr = loadfile(fname);
          if (stylestr == null) {
            document.getElementById('div_nonchrome').style.display = 'none';
            document.getElementById('div_chrome').style.display = "block";
            document.getElementById('atag_style').href = fname;
          }
          else {
            document.getElementById('style_textarea').value =
              "<style type=\"text/css\">"
              + stylestr
              + "\n.syntaxhighlighter {overflow-y: hidden !important;};"//縦ｽｸﾛｰﾙﾊﾞｰ消去
              + "</style>";
             
          }
 
          //スタイルの付け替え
          var head = document.getElementsByTagName('head')[0];
          var ele = document.getElementById("id_stylelink");
          if (ele != null) {
            head.removeChild(ele);
          }
          var link = document.createElement('link');
          link.id = "id_stylelink";
          link.rel = 'stylesheet';
          link.type = 'text/css';
          link.href = fname;
          head.appendChild(link);
        }
      }
    }
    function getBrush() {
      var eles = document.getElementsByName("brush");
      for (i = 0; i < eles.length; i++) {
        if (eles[i].checked) {
          return brushes[eles[i].value][0];
        }
      }
    }
    function isChecked(id) {
      var ele = document.getElementById(id);
      if (ele == null) {
        alert(id + " is null");
      }
 
      return ele.checked;
    }
    function makeRadioTable(type) {
      var arr = brushes;
      if (type == "style") {
        arr = styles;
      }
      var COLMAX = 5;
      var cnt = 0;
      var str = "<table>";
      if (type == "style") {
        str += "<tr><th colspan='" + COLMAX + "' align='center'>スタイルの選択</th></tr>";
      }
      else {
        str += "<tr><th colspan='" + COLMAX + "' align='center'>言語の選択</th></tr>";
      }
      for (var key in arr) {
        if (cnt % 5 == 0) {
          if (cnt != 0) {
            str += "</tr>";
          }
          str += "<tr>";
        }
        str += "<td><input type='radio' name='" + type + "' value='" + key + "'";
        if (key == "C++" || key == "Django") {
          str += " checked";
        }
        str += " /><label>" + key + "</label>";
        cnt++;
      }
      if (cnt % 5 != 0) {
        for (var i = 0 ; i < cnt - (cnt % 5) ; i++) {
          str += "<td></td>";
        }
      }
      str += "</tr></table>";
      return str;
    }
 
    function makeRadioButtons() {
      var radiobuttonarea = document.getElementById('radiobuttonarea');
      radiobuttonarea.innerHTML += makeRadioTable('style') + makeRadioTable('brush');
    }
    function conv() {
      load_brushes();
      document.getElementById('resultdispareadiv').style.display = "block";
      loadStyle();
 
      var divdiv = document.getElementById("divdiv");
      var pre = document.getElementById("preprepre");
      if (pre != null && pre.tagName.match(/DIV/i)) {
        divdiv.removeChild(pre);
        pre = null;
      }
      if (pre == null) {
        pre = document.createElement("pre");
        divdiv.appendChild(pre);
        pre.id = "preprepre";
      }
      var src_textarea = document.getElementById("src_textarea");
      var dst_textarea = document.getElementById("dst_textarea");
      dst_textarea.value = "";
      var src = src_textarea.value;
 
      pre.className = "brush: " + getBrush();
 
      pre.textContent = src;
 
      SyntaxHighlighter.defaults['auto-links'] = isChecked('checkbox_auto_links');
      SyntaxHighlighter.defaults['toolbar'] = false;
      SyntaxHighlighter.defaults['html-script'] = isChecked('checkbox_html_hilight');
      SyntaxHighlighter.defaults['tab-size'] = document.getElementById("text_tabsize").value;
      SyntaxHighlighter.defaults['gutter'] = true;
      SyntaxHighlighter.config.bloggerMode = isChecked('checkbox_blogger_mode');
 
      SyntaxHighlighter.highlight();
 
      var result = document.getElementById("preprepre");
      var resulthtml = result.innerHTML;
 
      dst_textarea.value = resulthtml;
 
      var resultpreview = document.getElementById("resultdiv");
      resultpreview.innerHTML = "<h3>javascriptなし版プレビュー</h3>(ハイライトされた結果をhtmlテキストとして貼り付けられる形式をプレビューしています。javascriptの機能は利用できません)<br />" + resulthtml;
 
      // もう不要
      divdiv.removeChild(result);
 
    }
    function appendBrushScript(src) {
      var s = document.createElement('script');
      s.type = 'text/javascript';
      s.src = version + "/scripts/" + src;
 
      document.head.appendChild(s);
    }
    function load_brushes() {
      //appendBrushScript("shCore.js");
      for (var key in brushes) {
        appendBrushScript(brushes[key][1]);
      }
    }
    // ブラシスクリプトの一括ﾛｰﾄﾞ
    load_brushes();
  </script>
</head>
<body>
  <div id="radiobuttonarea"></div>
  <script type="text/javascript">
    makeRadioButtons();
  </script>
  <input type="checkbox" id="checkbox_html_hilight" name="checkbox_html_hilight" value="true" />
  <label>html-script</label>
  <input type="checkbox" id="checkbox_blogger_mode" name="checkbox_blogger_mode" value="true" />
  <label>Blogger mode</label>
  <input type="checkbox" id="checkbox_auto_links" name="checkbox_auto_links" value="true" />
  <label>auto-linkes</label>
  TABサイズ:<input type="text" size=2 id="text_tabsize" name="text_tabsize" value="2" />
  <br />
 
  変換元テキスト入力欄:
  <input type="button" value="ハイライト実行" onclick="javascript: conv();" />
  <br />
  <textarea id="src_textarea"></textarea>
  <br />
 
  <div id="resultdispareadiv" style="display:none">
    <table>
      <tr>
        <td>
          <div id="div_nonchrome">
            ハイライト用スタイル:<br />
            <textarea id="style_textarea"></textarea>
            <br />
            <input type="button" value="クリップボードにコピー" onclick="javascript: toClipBoard('style_textarea');" />
          </div>
          <div id="div_chrome" style="display:none;background-color:bisque">
            <small>
              Chromeをお使いの方はGoogle様の保護により、<br />
              Edgeをお使いの方はMicrosoft様の優しさにより、<br />
              お使いのブラウザではローカルファイルをプログラムで<br />
              ﾛｰﾄﾞする権限が与えられておりません。<br />
              お気の毒ですが<a href="" id="atag_style" target="_blank">こちら</a>を手動で開きコピーして、<br />
              コピー内容を<br />
              <b>&lt;style type=&quot;text/css&quot;&gt;のようなタグで囲って</b><br />
              blogなどの対象にペーストしてください。<br />
              このリンクは単にスタイルで指定したcssファイル<br />
              へのリンクです。
            </small>
          </div>
        </td>
        <td>
          ハイライト済ﾃｷｽﾄ:<br />
          <textarea id="dst_textarea"></textarea>
          <br />
          <input type="button" value="クリップボードにコピー" onclick="javascript: toClipBoard('dst_textarea');" />
        </td>
      </tr>
    </table>
  </div>
  <!-- 縦ｽｸﾛｰﾙﾊﾞｰを隠す -->
  <style>
    .syntaxhighlighter {
      overflow-y: hidden !important;
    }
  </style>
  <div id="divdiv">
    <div id=resultdiv></div>
    <pre id="preprepre"></pre>
  </div>
</body>
</html>
javascriptとかめったに使わないので不慣れで、見る人が見たら噴飯ものかもしれませんが、まあファイルも短いし、結構簡単にできたなあ、という感じです。
cgi版と違ってversion2系列には対応していないのですが、v2系は改行対応くらいしか利点がないのでまあいいかなと。

まあ、こんな感じってことで、以上です。
投稿者 時刻:
ラベル: , , , ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)