« プログラミング講座(174) 図形グループの左右反転 | トップページ | JavaScript (41) SyntaxHighlighter のカスタマイズ »

2017/06/09

JavaScript (40) ソースコードの表示 SyntaxHighlighter

JavaScript について久しぶりに書きます。このシリーズでも使わせていただいている SyntaxHighlighter ですが、ココログでもコードを表示できる他、カスタマイズすることもできます。

そこで今回は、SyntaxHighlighter の最新版 (4.0) を使っていろいろやってみようと思います。

まず、GitHub にある SyntaxHighlighter のビルドのインストラクション(指示)にしたがって SyntaxHighligher をビルドしてみようと思います。

最初は git コマンドを使うので、Git Shell を立ち上げます。

 

Windows PowerShell

Copyright (C) 2016 Microsoft Corporation. All rights reserved.

~\Documents\GitHub> git clone https://github.com/syntaxhighlighter/syntaxhighlighter.git

Cloning into 'syntaxhighlighter'...

remote: Counting objects: 3500, done.

remote: Total 3500 (delta 0), reused 0 (delta 0), pack-reused 3500

Receiving objects: 100% (3500/3500), 5.94 MiB | 1.81 MiB/s, done.

Resolving deltas: 100% (1762/1762), done.

~\Documents\GitHub>

 

次に node.js のコマンドを使うので、Node.js コマンドプロンプトを立ち上げ、コマンド npm install を実行します。

 

npm ERR! node -v v0.10.13

npm ERR! npm -v 1.3.2

npm ERR! path C:\Users\Nonki\Documents\GitHub\syntaxhighlighter\node_modules\bab

el-preset-es2015\node_modules\babel-plugin-transform-es2015-function-name\node_m

odules\babel-helper-function-name\node_modules\babel-template\node_modules\babyl

on\lib\index.js

npm ERR! fstream_path C:\Users\Nonki\Documents\GitHub\syntaxhighlighter\node_mod

ules\babel-preset-es2015\node_modules\babel-plugin-transform-es2015-function-nam

e\node_modules\babel-helper-function-name\node_modules\babel-template\node_modul

es\babylon\lib\index.js

npm ERR! fstream_type File

npm ERR! fstream_class FileWriter

npm ERR! code ENOENT

npm ERR! errno 34

npm ERR! fstream_stack C:\Program Files (x86)\nodejs\node_modules\npm\node_modul

es\fstream\lib\writer.js:284:26

npm ERR! fstream_stack Object.oncomplete (fs.js:107:15)

npm http GET https://registry.npmjs.org/regenerator-runtime

npm http 304 https://registry.npmjs.org/regenerator-runtime

npm ERR!

npm ERR! Additional logging details can be found in:

npm ERR!     C:\Users\Nonki\Documents\GitHub\syntaxhighlighter\npm-debug.log

npm ERR! not ok code 0

C:\Users\Nonki\Documents\GitHub\syntaxhighlighter>

 

どうやら、エラーになってビルドがうまくいかなかったようです。そこで、Node.jp の最新版をインストールし直し、npm cache clean コマンドを実行してから、再び npm install を実行しました。

 

| `-- webpack-core@0.6.9

|   +-- source-list-map@0.1.8

| `-- source-map@0.4.4

`-- yargs@3.32.0

+-- camelcase@2.1.1

  +-- cliui@3.2.0

| `-- wrap-ansi@2.1.0

  +-- decamelize@1.2.0

+-- os-locale@1.4.0

  | `-- lcid@1.0.0

| `-- invert-kv@1.0.0

  +-- string-width@1.0.2

| +-- code-point-at@1.1.0

  | `-- is-fullwidth-code-point@1.0.0

| `-- number-is-nan@1.0.1

  +-- window-size@0.1.4

`-- y18n@3.2.1

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\ch

okidar\node_modules\fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@

1.1.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}

)

C:\Users\Nonki\Documents\GitHub\syntaxhighlighter>

 

こちらはうまくいったようなので、次に進み、node .\node_modules\gulp\bin\gulp.js setup-projectnode コマンドを実行します。今度は、git clone https://github.com/syntaxhighlighter/brush-php.git でエラーになってしまいました。調べてみると、Windows 10 でのビルドはうまくいかないようでした。そこで、上記と同じことを Mac でやってみました。Node.js インストール後、実行したコマンドは以下の通りです。

 

git clone https://github.com/syntaxhighlighter/syntaxhighlighter.git

cd syntaxhighlighter

npm install

./node_modules/gulp/bin/gulp.js setup-project

 

Mac では問題なくビルドできました。最後に以下のコマンドを実行しました。これで、dist フォルダに syntaxhighlighter..js と theme.css が作成されます。

 

NONKI-Mac-mini:syntaxhighlighter nonki$ ./node_modules/gulp/bin/gulp.js build --compat

--brushes=css,cpp,csharp,java,javascript,vb,xml --theme=default

[19:18:47] Requiring external module babel-register

[19:18:47] Using gulpfile ~/Documents/syntaxhighlighter/gulpfile.babel.js

[19:18:47] Starting 'build'...

[19:18:50] Theme: default

[19:18:50] Brushes: css, cpp, csharp, java, javascript, vb, xml

[19:18:50] Hash: 5910dbdf4bb31d0abb6a

Version: webpack 1.15.0

Time: 2392ms

Asset Size Chunks Chunk Names

syntaxhighlighter.js 145 kB 0 [emitted] main

syntaxhighlighter.js.map 224 kB 0 [emitted] main

chunk {0} syntaxhighlighter.js, syntaxhighlighter.js.map (main) 137 kB [rendered]

[0] ./src/index.js 1.18 kB {0} [built]

[1] ./src/core.js 7.16 kB {0} [built]

[2] ./repos/opts-parser/opts-parser.js 1.5 kB {0} [built]

[3] ./repos/syntaxhighlighter-regex/index.js 1.16 kB {0} [built]

[4] ./repos/syntaxhighlighter-regex/xregexp.js 67.8 kB {0} [built]

[5] ./repos/syntaxhighlighter-match/index.js 659 bytes {0} [built]

[6] ./repos/syntaxhighlighter-match/lib/match.js 1.19 kB {0} [built]

[7] ./repos/syntaxhighlighter-match/lib/apply-regex-list.js 1.05 kB {0} [built]

[8] ./repos/syntaxhighlighter-match/lib/matches.js 2.67 kB {0} [built]

[9] ./repos/syntaxhighlighter-html-renderer/index.js 9.67 kB {0} [built]

[10] ./src/utils.js 2.3 kB {0} [built]

[11] ./src/transformers/index.js 538 bytes {0} [built]

[12] ./src/transformers/trim.js 316 bytes {0} [built]

[13] ./src/transformers/blogger_mode.js 186 bytes {0} [built]

[14] ./src/transformers/strip_brs.js 181 bytes {0} [built]

[15] ./repos/unindenter/unindenter.js 955 bytes {0} [built]

[16] ./repos/retabber/retabber.js 1.4 kB {0} [built]

[17] ./src/dom.js 6.76 kB {0} [built]

[18] ./src/config.js 311 bytes {0} [built]

[19] ./src/defaults.js 1 kB {0} [built]

[20] ./src/html_script.js 1.72 kB {0} [built]

[21] ./~/process/browser.js 5.45 kB {0} [built]

[22] ./repos/brush-base/brush-base.js 2.78 kB {0} [built]

[23] ./repos/brush-css/brush.js 4.86 kB {0} [built]

[24] ./repos/brush-cpp/brush.js 4.51 kB {0} [built]

[25] ./repos/brush-csharp/brush.js 1.8 kB {0} [built]

[26] ./repos/brush-java/brush.js 1.37 kB {0} [built]

[27] ./repos/brush-javascript/brush.js 1.05 kB {0} [built]

[28] ./repos/brush-vb/brush.js 1.56 kB {0} [built]

[29] ./repos/brush-xml/brush.js 1.54 kB {0} [built]

[30] ./~/domready/ready.js 1.13 kB {0} [built]

[31] ./src/dasherize.js 526 bytes {0} [built]

[32] ./src/compatibility_layer_v3.js 478 bytes {0} [built]

[19:18:50] Finished 'build' after 2.75 s

NONKI-Mac-mini:syntaxhighlighter nonki$

 

このようにして作成した、theme.css と syntaxhighlighter.js について、下記のようにココログの設定を行ってみたのですが、結局うまくいきませんでした。他の原因も考えられるのですが、SyntaxHighlighter 4.0 はまだ開発途中と判断し、3.0.83 をダウンロードし、上記のようなビルドは行わず、ココログの設定 | 基本情報 | ブログのサブタイトルの下に <script> タグを設定しました。

 

<link type="text/css" rel="stylesheet" href="http://www.nonkit.com/javascript/css/shCoreEclipse.css">

<link type="text/css" rel="stylesheet" href="http://www.nonkit.com/javascript/css/shThemeEclipse.css">

<script type="text/javascript" src="http://www.nonkit.com/javascript/js/XRegExp.js"></script>

<script type="text/javascript" src="http://www.nonkit.com/javascript/js/shCore.js"></script>

<script type="text/javascript" src="http://www.nonkit.com/javascript/js/shBrushCpp.js"></script>

<script type="text/javascript" src="http://www.nonkit.com/javascript/js/shBrushCSharp.js"></script>

<script type="text/javascript" src="http://www.nonkit.com/javascript/js/shBrushCss.js"></script>

<script type="text/javascript" src="http://www.nonkit.com/javascript/js/shBrushJava.js"></script>

<script type="text/javascript" src="http://www.nonkit.com/javascript/js/shBrushJScript.js"></script>

<script type="text/javascript" src="http://www.nonkit.com/javascript/js/shBrushVb.js"></script>

<script type="text/javascript" src="http://www.nonkit.com/javascript/js/shBrushXml.js"></script>

<script type="text/javascript">  

SyntaxHighlighter.config.stripBrs = true;

    SyntaxHighlighter.all();  

</script>

 

図36 ココログの設定

【図36 ココログの設定】

 

これでココログの記事の中でコードを表示できるようになります。コードは以下のタグで挟みます。

 

<pre class="brush: vb">

</pre>

 

SyntaxHightligher 自身は JavaScript で書かれていますが、さまざまなプログラミング言語をサポートしています。例えば、以下のプログラムは私が書いた Visual Basic のコードです。結果のとおり、<p> タグが残ってしまいます。サブタイトルの下に設定した、SyntaxHighlighter.all(); の前に、SyntaxHighlighter.config.stripBrs = true; を置いたことにより、<br> タグは削除できていますが、&ltp> タグはうまく削除できません。また、右上の?を押すと本来、SyntaxHighlighter についてのバージョン情報などが表示されるはずなのですが、今のところ @ABOUT@ と表示されてしまします。

Imports System.IO

Module FDump

 

Sub Main()

' get filename from arguments

    Dim filename As String = System.Environment.GetCommandLineArgs(1)

' open input file

    Dim stdin As FileStream = New FileStream(filename, FileMode.Open, FileAccess.Read)

' output a line

    Dim b, i As Integer

b = stdin.ReadByte()

    i = 0

While 0 < b

        If i Mod 256 = 0 Then

Console.WriteLine("")

            Console.WriteLine("Addr  +0 +1 +2 +3 +4 +5 +6 +7 +8 +9 +A +B +C +D +E +F")

Console.Write("---- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --")

        End If

If i Mod 16 = 0 Then

            Dim h As String

Console.WriteLine("")

            h = Hex(i \ 16)

Console.Write(Left("000", 4 - h.Length) & h & " ")

        End If

Console.Write(Hex(b) & " ")

        i += 1

b = stdin.ReadByte()

    End While

Console.WriteLine("")

#If DEBUG Then

Console.WriteLine("")

    Console.WriteLine("Press any key to continue...")

Console.ReadKey()

#End If

End Sub

End Module

 

ココログでの表示は上記のように多少問題が残っていますが、次回は Small Basic 用に設定をカスタマイズしてみたいと思います。

 

(つづく)

 

|

« プログラミング講座(174) 図形グループの左右反転 | トップページ | JavaScript (41) SyntaxHighlighter のカスタマイズ »

JavaScript」カテゴリの記事

GitHub」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック


この記事へのトラックバック一覧です: JavaScript (40) ソースコードの表示 SyntaxHighlighter:

« プログラミング講座(174) 図形グループの左右反転 | トップページ | JavaScript (41) SyntaxHighlighter のカスタマイズ »