guttally.net

SyntaxHighlighter ブラシ - DirTree

 Syntax Highlighter でディレクトリ構造を表示するためのブラシです。 ぶっちゃけ自分だけが使えれば良いと思って作ったので,正直なところ,使い勝手はあんまり良くないです。

特徴

  • ディレクトリ構造を Syntax Highlighter で修飾して表示
  • ~,|,-,とスペースだけのシンプルな (?) 記法

使用例

html        // トップディレクトリ
|   index.html  // ファイルの例
|
|---foo // ディレクトリ
|   |   index.html
|   |   example.html
|   |
|   |---example1    // ディレクトリのネスト
|   |       hoge.html
|   |       fuga.jpg
|   |
/*
複数行にわたるコメントを
挿入することもできます
*/
|   |---example2
|   ~   // 省略マーク
~

コード

 こちらからダウンロードしてください。 なお,本コードは MIT ライセンスにて提供します。

shBrushDirTree.js
// shBrushDirTree.js
//
// Copyright(c) 2014 guttally
// 
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files(the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and / or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions :
// 
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
// 
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
;(function()
{
	// CommonJS
	typeof(require) != 'undefined' ? SyntaxHighlighter = require('shCore').SyntaxHighlighter : null;
	function Brush() {
		this.regexList = [
			{ regex: SyntaxHighlighter.regexLib.singleLineCComments,  css: 'comments' },
			{ regex: SyntaxHighlighter.regexLib.multiLineCComments,   css: 'comments' },
			{ regex: /^([\|~ ]   )*\|(---)?/gm,                       css: 'color1' },
			{ regex: /   [^\\\/\:\*\?\"<>\|]+/gm,                     css: 'keyword bold' }
		];
	};
	Brush.prototype = new SyntaxHighlighter.Highlighter();
	Brush.aliases   = ['dirtree', 'dir'];
	SyntaxHighlighter.brushes.DirTree = Brush;    // CommonJS
	typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
})();

使い方

インストール

 上記のコードを shBrushDirTree.js というファイル名で,Syntax Highlighter の他のブラシファイルが格納されているディレクトリに保存します。 以上でインストールは完了です。

使い方

 html タグの使い方は,SyntaxHighlighter の他のブラシと同じです。 SyntaxHighlighter の使い方などを参考にしてください。 なお,ブラシのエイリアスは dirtree,または dir です。

ディレクトリ構造の表記方法

 ディレクトリ構造の表記には,本ブラシ固有の記法を用いています。 おおよその表記ルールは下記の通りです。

  • 初めに,ルートディレクトリの名称を書きます。ルートディレクトリの名称は,行の先頭から, "|" 以外の文字で始まらなければなりません。
  • 以下のディレクトリ構造は '|' と '---' および半角スペースで表記します。
  • "|---" の後ろに続く文字列は,ディレクトリの名称とみなされます。
  • "|   " (| の後ろ,半角スペース×3個)  に続く文字列は,ファイル名とみなされます。
  • "~" (半角チルダ) は以降のディレクトリ構造を省略することを示しています。
  • C++ と同様のコメント構文 (//, /* */) が利用可能です。

 明示的にルールを書くだけの技量がないので,あとは↑の使用例から察してください……。

その他

 javascript の正規表現で後読みがサポートされていなかったため,"|---" に続く,以降の文字列だけを正規表現でピックアップする手段を思いつけませんでした。 ホントはディレクトリ名称を別色でマークアップ,ファイルを bold でマークアップ,という形にしたかったのですが,前述の事情によりディレクトリ名の抽出ができず,断念。 仕方がないので,ファイル名を着色 + 太字でマークアップすることにしました。

 うーん……微妙です。

コメントを残す



(このメールアドレスは表示されません。)


Captcha認証コード

Captchaをクリックすると違う文字候補が出てきます。