FC2ブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

GISTの埋め込みパーツのタブ幅について

GISTの機能でGithubのコードをブログなどに埋め込めるわけですが、これのタブ幅が8文字とやけに広い。l
で、これを何とか調整できないかと色々調べていたのですが、これがどうにも無理そうだ、という話。



・まずパーツの埋め込み方法について

GISTのコードを埋め込む場合は、GISTのページから発行されるスクリプトを貼り付ける。
Githubのリポジトリ内のファイルを埋め込む場合は、私が以前書いた記事でこれまでに何度も使用しているのですが、たとえばこちら

_findfirst / _findnext のハンドルの型はintptr_t

基本的にはスクリプトを1行組み込むだけでパーツを埋め込むことが出来ます。
上記の記事の場合はこんな感じ。
<script src="http://gist-it.appspot.com/github/fkhideaki/CPPSamples/blob/master/File/FileList.cpp"></script>

構文は

http://gist-it.appspot.com/github/[Githubのアカウント]/[リポジトリ名]/blob/[ブランチ名]/[リポジトリ内の対象のファイルパス]

となっています。



・コード埋め込みの仕組み

上記のページをみると中身はこんな感じになっています。

if ( 'prettyPrint' in window ) {} else {
  document.write( '<script type="text/javascript" src="http://gist-it.appspot.com/assets/prettify/prettify.js"></script>' );
}


document.write( '<link rel="stylesheet" href="http://gist-it.appspot.com/assets/embed.css"/>' );


document.write( '<link rel="stylesheet" href="http://gist-it.appspot.com/assets/prettify/prettify.css"/>' );

document.write( ... 対象のファイルをエンコードした文字列 ... );

document.write( '<script type="text/javascript">prettyPrint();</script>' );


ざっくりというと、まず対象のコードはhtmlにエンコードされていますが、ソースの内容がごっそりそのまま埋め込まれています。

そして、「prettify.js」というスクリプトの「prettyPrint()」という関数で良い感じに整形して表示される、というシンプルな仕組みになっています。

この段階で、埋め込まれたコードの内容としてはインデントの内容はソースファイルのまま、
タブならタブ、スペースならスペースのままになっています。

つまり、上記の整形機能の中で\tを8文字のスペースに変換しているということになります。



・インデントの制御はどうなっているか

上記のprettify.jsの中身で、インデントの制御をしている部分は次のようになっています。
  function makeTabExpander(tabWidth) {
    var SPACES = ' ';
    var charInLine = 0;

    return function (plainText) {
      // walk over each character looking for tabs and newlines.
      // On tabs, expand them. On newlines, reset charInLine.
      // Otherwise increment charInLine
      var out = null;
      var pos = 0;
      for (var i = 0, n = plainText.length; i < n; ++i) {
        var ch = plainText.charAt(i);

        switch (ch) {
          case '\t':
            if (!out) { out = []; }
            out.push(plainText.substring(pos, i));
            // calculate how much space we need in front of this part
            // nSpaces is the amount of padding -- the number of spaces needed
            // to move us to the next column, where columns occur at factors of
            // tabWidth.
            var nSpaces = tabWidth - (charInLine % tabWidth);
            charInLine += nSpaces;
            for (; nSpaces >= 0; nSpaces -= SPACES.length) {
              out.push(SPACES.substring(0, nSpaces));
            }
            pos = i + 1;
            break;
          case '\n':
            charInLine = 0;
            break;
          default:
            ++charInLine;
        }
      }
      if (!out) { return plainText; }
      out.push(plainText.substring(pos));
      return out.join('');
    };
  }


ざっくりというと、コード中の\tを引数のtabWidthの文字数文のスペースに変換する、ということのようです。

で、その引数はどこから来るか、というと、スクリプトの冒頭で宣言されており、

/** the number of characters between tab columns */
window['PR_TAB_WIDTH'] = 8;


こうなっています。

このスクリプトを実行する時点でこの変数を制御できれば調整できるのですが、今のところは無理そうです。

ちなみに、これらのスクリプトをすべてローカルに保存して、この変数を好きな値に変更してやると、調整は可能です。


スポンサーサイト

コメントの投稿

非公開コメント

カレンダー
07 | 2018/08 | 09
- - - 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 -
最新記事
カテゴリ
Qt (21)
SDL (2)
MFC (2)
検索フォーム
月別アーカイブ
最新コメント
最新トラックバック
RSSリンクの表示
リンク
リンク(管理用)
FC2カウンター
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。