コードをハイライトする「Blogger Syntax Highlighter」ウィジェット
先日、Google のコードハイライトツールを利用した「Code Prettify」ウィジェットを紹介したばかりなんですが、今回は、ブログ内のコードをハイライト表示するもう一つのウィジェット、「Blogger Syntax Highlighter」の紹介です。 参考にさせてもらったのは、こちら。 yan note: BloggerでSyntaxHighliterを使うには？ このウィジェットは、Google Code に公開されている「syntaxhighlighter」というコードを元に作られています。このウィジェットを導入しておくと、ブログ本文に <pre name="code" class="java"> public class HelloWorld { public static void main(String[] args) { System.out.println("Hel
Blogger Syntax Highlighterで追加したスクリプトを表示してみる
SyntaxHighlighterの表示テストをかねて、テンプレートに追加したスクリプトを表示してみます。 ついでにテンプレート編集手順を示します。 （１）まず、Bloggerのダッシュボードの「デザイン」タブー「HTMLを編集」をクリックしてテンプレート編集画面を出します。 （２）「テンプレートをすべてダウンロード」をクリックして、XSLTのスタイルシート・テンプレートとなるXMLファイルをダウンロードしておきます。 （３）テキストエディタでテンプレートXMLファイルを開き、 </head> タグを検索します。 </b:template-skin> </head> <body expr:class='"loading" + data:blog.mobileClass'> このサイトのXSLTのスタイルシート・テンプレートXMLファイルでは、631行目に </head> タグがありました（
技術系サイトに必需品！ ソースコードは鮮やかに JavaScriptもPHPもHTMLもOK！「Syntax Highlighter」の使い方
Webプログラミング/Webデザインのネタを扱うブログやWebサイトを運営していると、HTMLやCSSなどのソースコードを掲載することが多くあります。そんなときにぜひ活用したいのが、ソースコードを読みやすく表示してくれるJavaScriptライブラリです。今回は、そのうちの1つ、「Syntax Highlighter」の使い方を紹介しましょう。 多くの言語の構文強調表示に対応した「Syntax Highlighter」 HTMLなど各種言語のソースコードをWebページの中で表示するのは、HTMLのpre要素を使えば簡単です。ただ、ソースコードをそのまま表示すると、見た目が分かりやすくはありません。そこで、タグなど言語の特定キーワードに色を付けて、他の部分よりも強調して表示することで見やすくしましょう。 こういった「構文強調表示」を行なうJavaScriptは、いくつか公開されていますが、そ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
