ブログの説明
パソコンやアンドロイドなどの情報を収集しまとめているブログです。

記事内に張られている画像はクリックすると見やすいサイズの画像が表示されるようになっています。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。
アクセスカウンター
検索フォーム
カレンダー
10 | 2017/11 | 12
- - - 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 - -

スポンサーサイト

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

ソースコードをハイライトしよう!

//C++のHello World表示プログラム
#include<iostream>
using namespace std;
int main()
{
	cout << "Hello World" << endl;
	return 0;
} 
プログラムのソースコードをインターネット上で公開しようとした時、見やすくしてくれるハイライトスクリプト。
意外と簡単に使えます。
ハイライトスクリプトの一つ、SyntaxHighlighterを使ってみましょう。

【SyntaxHighlighterの準備】
まず、SyntaxHighlighterのダウンロードページに行き、syntaxhighlighter_3.0.83.zipをダウンロードします。
syntaxhighlighter_3.0.83.zipを解凍すると中身は
・compass
・scripts
・src
・styles
・tests
・index.html
・LGPL-LICENSE
・MIT-LICENSE
になっていますが、使うのは「style」と「script」だけです。
この二つのフォルダをどこか好きなところにアップロードしてください。
アップロードするサーバーは使うhtmlファイルと同じサーバーでも違うサーバーでも大丈夫です。
これで準備は完了です。

【使い方】
ヘッダーにこれを追加します。
ヘッダーに追加するJAVA Scriptですが、「shBrush使用言語.js」だけ使用する言語によって書き換えてください。

<script type="text/javascript" src="アップしたサーバー名/scripts/shCore.js"></script>
<!-- 言語に対応したスクリプトを入れる。ここから -->
<script type="text/javascript" src="アップしたサーバー名/scripts/shBrushCpp.js"></script><!-- 例えばC++ファイルとか -->
<script type="text/javascript" src="アップしたサーバー名/scripts/shBrushXml.js"></script><!-- 例えばXMLファイルとか -->
<!-- 言語に対応したスクリプトを入れる。ここまで -->
<link type="text/css" rel="stylesheet" href="アップしたサーバー名/styles/shCoreDefault.css"/>
<script type="text/javascript">	    SyntaxHighlighter.all();</script>
あとはソースコードを書くだけです。
ソースコードを書くときはpreタグを使い、class=”brush:使用言語”を指定しておきます。
言語名は表の様に指定してください。
言語指定子
C++cpp , c , c++
C#c# , c-sharp , csharp
CSScss
Delphidelphi , pascal
Javajava
Java Scriptjs , jscript , Javascript
PHPphp
Pythonpy , python
Rubyrb , ruby , rails , ror
Sqlsql
VBvb , vb.net
XML/HTMLxml , html , xhtml , xslt

注意すべきことは、公開するソースコードはすべてエスケープシークエンスを使ってください。
<!--htmlの例-->
<pre class="brush:html">
&lt;html&gt;
    &lt;head&gt;
    &lt;title&gt;表示サンプル&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
    表示用サンプルページ
    &lt;/body&gt;
&lt;/html&gt;
</pre>
難しくはないので使ってみてはいかがでしょうか?

COMMENT

EDIT COMMENT

非公開コメント

最新トラックバック
ブロとも申請フォーム
QLOOKアクセス解析
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。