こんな私でもいつかはプログラミング関連の記事も書くかと思います。
(誰の参考になるかはかなりの不明ではあるけれど・・・。)
そんな時にブログにもエディタのようにソースコードを貼り付けたいですよね。
標準では綺麗に表示をすることができないので、
SyntaxHighlighter(シンタックスハイライター) というものを導入してみました。
私の方からはあまり詳しい説明ができないので・・・
参考にさせていただいた記事はこちらです!
れあ@Cafe :: livedoor BlogにSyntaxHighlighterを適用する方法
対象は現在私が使っている livedoor Blog ですが、
これはどのサイトでも同じような手順を踏むと思いますので、
あまりやり方に変わりはありません。
Sublime Text なんかで書くと拡張子に対応して Syntax が自動で設定されます

このようにコードに装飾をつけて、見やすくしてミスをも防ぐんですね。
ですが、先ほどのような画像では、
ソースコードをコピーしたくてもできません。
ですので、見ながら書く必要があります。
これにはタイプミスも伴いますし、
何より面倒くさい!
しかし、ここで SyntaxHighlighter を使うことで
このように文字列として表記することができるので、
コピーもできますしとても見やすいです。
また、多数の言語に対応しています。
例を挙げると、HTML, CSS, JScript, PHP, Ruby, Python, Perl, C++, C#, VB, Java...
主要な言語はほぼすべてと言って良いほど対応しています。
私が好きなのはC#とVBなので、全く問題ありません。
試しに、ユーザーに名前を聞いて挨拶をするプログラムのコードを記述してみます。
これで、もしもプログラミング関連の記事を書くことがっても、
読者の方がサンプルをコピーして簡単に自分でも使えるようになります。
以上、SyntaxHighlighterの紹介(?)でした。
(誰の参考になるかはかなりの不明ではあるけれど・・・。)
そんな時にブログにもエディタのようにソースコードを貼り付けたいですよね。
標準では綺麗に表示をすることができないので、
SyntaxHighlighter(シンタックスハイライター) というものを導入してみました。
私の方からはあまり詳しい説明ができないので・・・
参考にさせていただいた記事はこちらです!
れあ@Cafe :: livedoor BlogにSyntaxHighlighterを適用する方法
対象は現在私が使っている livedoor Blog ですが、
これはどのサイトでも同じような手順を踏むと思いますので、
あまりやり方に変わりはありません。
Sublime Text なんかで書くと拡張子に対応して Syntax が自動で設定されます

このようにコードに装飾をつけて、見やすくしてミスをも防ぐんですね。
ですが、先ほどのような画像では、
ソースコードをコピーしたくてもできません。
ですので、見ながら書く必要があります。
これにはタイプミスも伴いますし、
何より面倒くさい!
しかし、ここで SyntaxHighlighter を使うことで
まいすの日記帳
このように文字列として表記することができるので、
コピーもできますしとても見やすいです。
また、多数の言語に対応しています。
例を挙げると、HTML, CSS, JScript, PHP, Ruby, Python, Perl, C++, C#, VB, Java...
主要な言語はほぼすべてと言って良いほど対応しています。
私が好きなのはC#とVBなので、全く問題ありません。
試しに、ユーザーに名前を聞いて挨拶をするプログラムのコードを記述してみます。
using System; class Hello { static void Main() { Console.WriteLine("What's your name?"); string name = Console.ReadLine(); Console.WriteLine("Hello, " + name); } }
Module Hello Sub Main() Console.WriteLine("What's your name?") Dim name As String = Console.ReadLine() Console.WriteLine("Hello, " & name) End Sub End Moduleちゃんと表示されていますね。
これで、もしもプログラミング関連の記事を書くことがっても、
読者の方がサンプルをコピーして簡単に自分でも使えるようになります。
以上、SyntaxHighlighterの紹介(?)でした。
コメント
コメント一覧 (1)