2014年4月18日金曜日

スケッチの表示にSyntaxHighlighterを使ってみる


ずっとarduinoのスケッチを記事に載せるにあたって、textareaタグで表示してきましたが、以前断念したSyntaxHighlighterでスケッチの表示に挑戦します。

参考
http://p--q.blogspot.jp/2013/05/bloggersyntaxhighlighter1.html

arduinoはC/C++風言語ということなので、
http://www.way2blogging.org/widget-generators/syntax-highlighter-scripts-generator
でC++用js,cssファイルを生成し、bloggerの「テンプレート」-「HTMLの編集」でテンプレートファイルを編集。
いざ、テストページでスケッチを表示して見ると、どうも寂しい。
arduinoオリジナルのコマンド等に色がついていないようでした。

参考
http://nevermore210.blog.fc2.com/blog-entry-11.html
arduino用のjsファイルを置き、そのファイルを呼び出せばいいとのこと。

そのファイルの場所
http://upnotnorth.net/2010/02/04/arduino-code-highlighting-for-the-web/
(投稿が2010年、新しいコマンド等には対応していません。INPUT_PULLUPとか。その場合は自分でファイルの修正をする必要が。)

しかしここはblogger。
blogger内にファイルをアップロードする場所がないので、外部に置かないといけません。(たぶん)
調べたところ、googleサイトと言うウェブページを作れるサービスが有り、そこに必要なファイルを置く方法があることがわかりました。

早速googleサイトを登録してファイル置き場を確保し、SyntaxHighlighterからファイルをPCをにダウンロード。
http://alexgorbatchev.com/SyntaxHighlighter/download/

解凍したファイルから必要な物をgoogleサイトにアップロード。
最低限必要なものは多分これら。(midnightテーマの場合)
shCore.css
shCoreMidnight.css         //使いたいテーマに合わせる
shThemeMidnight.css      //使いたいテーマに合わせる
shCore.js
shBrushArduino.js          //arduino用。他の言語も使うならそれもアップロード

自分は解凍したファイルの中のscriptsフォルダとstylesフォルダの中身全部アップロードしました。
アップロードした場所に合わせて、テンプレートファイルを編集。



そしてテスト記事を書いてみます。
「HTML」編集モードで

<pre class="brush: arduino;">
// ココにソースを記述
</pre>

とコードを書き、「作成」モードに戻って

// ココにソースを記述

の部分にスケッチをコピーアンドペースト。
きれいに色が付くようになりましたが、おかしなところを発見。コード中の<br/>は解説サイトにあるように&lt;br /&gt;に置き換えても、実際に表示してみると、改行に置き換えられタグがなくなってしまうということに。
そこでテンプレートファイルの
SyntaxHighlighter.config.bloggerMode = true;

SyntaxHighlighter.config.bloggerMode = false;
に変更。
<br /> は<br />と表示され、コードが1行になってしまう現象もありませんでした。

以下が最終的にテンプレートファイルに追加した部分。
PHP、plainTXT、pythonについては、将来使うかもしれないけど今すぐには使いそうにないのでコメントアウトしています。


あとは好みに合わせてカスタマイズ。
IE、chromeで縦スクロールバーが常に出てしまう現象、IEで最後の1行が表示されない現象の解消のためにshCoreMidnight.cssを編集。
1行毎に色を変えるために、shThemeMidnight.cssを編集。
ひとまず当初の目的は達成できたようです。
ただ長いコードは縦スクロールバーをつけて表示したいところですが、その方法はあるのでしょうか。

参考
http://p--q.blogspot.jp/2013/09/bloggergoogle.html

リンク先に書かれているように、表示速度が遅いようです。
外部においたファイルの内容を、bloggerのガジェット、ウィジェット内に記述?することで速度が改善するようですが、今日はここまで。

サンプルスケッチをSyntaxHighlighterで表示してみました。



/*
  Blink
  Turns on an LED on for one second, then off for one second, repeatedly.
 
  This example code is in the public domain.
 */
 
// Pin 13 has an LED connected on most Arduino boards.
// give it a name:
int led = 13;

// the setup routine runs once when you press reset:
void setup() {                
  // initialize the digital pin as an output.
  pinMode(led, OUTPUT);     
}

// the loop routine runs over and over again forever:
void loop() {
  digitalWrite(led, HIGH);   // turn the LED on (HIGH is the voltage level)
  delay(1000);               // wait for a second
  digitalWrite(led, LOW);    // turn the LED off by making the voltage LOW
  delay(1000);               // wait for a second
}


過去の記事でのスケッチの表示を、ぼちぼちSyntaxHigjlighterに変更していきます。

環境:arduinoUNO、arduinoIDE1.0.5、win7(64bit)



0 件のコメント:

コメントを投稿