HOME   »   ブログ運営  »  FC2ブログでコードを行番号つきで表示する方法
RSSフィード
ブログ記事内にコードを表示する時のデザインがいまいちだったので、見やすくするためにコードを行番号付きで表示するようにしました。その時に利用したのが「SyntaxHighlighter」です。

今回は、「SyntaxHighlighter」をFC2ブログで使用する方法を紹介します。
SyntaxHighlighter

スポンサーリンク

SyntaxHighlighterを使ってFC2ブログにコードを行番号つきで表示する方法

SyntaxHighlighterの使い方に関して、以下の記事を参考にしました。
Bloggerでも行番号と共に色分け!!SyntaxHighlighterの導入 | WebTerminal

上記事ではBlogger向けだったのですが、基本的にFC2ブログでも同じように適用できました。

手順の流れ

まずは、コードを行番号付きで表示する流れを示しておきます。
  1. Syntax Highlighter Scripts Generatorのページで、表示されるときのデザインを選択してスクリプトを生成
  2. 生成されたスクリプトをFC2テンプレートのHTML内</head>直前にはりつける
  3. ブログ記事内で、所定の書式により、コードをはる
  4. 無事反映されている!


では順番に見ていきます。

Syntax Highlighter Scripts Generaterでデザインを選択

こちら→Syntax Highlighter Scripts Generator ‹ Blogger Widgets | Tips | Tricks | Templates : Way2Bloggingのページでデザインを選びます。

SyntaxHighlighter
▲Theme(テーマ)をDefaultに選択し、Generateを押しました。「Select Brushes」は、色分けしたい言語です。今回はあまり意識していません。JavaScriptだけにチェックを入れてみました。

SyntaxHighlighter
▲そして、生成されたコードをコピーします。

生成されたスクリプトをFC2テンプレートのHTML内</head>直前にはりつける

SyntaxHighlighter
▲FC2ブログ=>設定=>テンプレートの設定から、HTMLの編集をします。HTML内にある</head>の直前に、先ほどコピーしたスクリプトをはりつけ、更新をします。

ブログ記事内で所定の書式によりコードをはる

ここまでで準備は整いました。あとは、実際に表示したいコードをブログで書くだけです。この時には、決まった書式があります。それが以下になります。

<pre class="brush:javascript" title="デモンストレーション">ここにコードをはる</pre>

備考

  • 「ここにコードをはる」の部分に、表示したいコードを書きます。
  • 「brush:」の後には、表示したい言語を書いてください。上の例ではjavascriptとなっています。
  • titleは空欄でも構いません。(title="")
  • 改行する場合には、改行の扱いを「HTMLタグのみ」にし、<br />タグで改行してください。(以下参照)
SyntaxHighlighter
▲FC2ブログの記事編集画面で、改行の扱いをHTMLタグのみにしてください。

実際に反映した画面

LaTeX文書作成
\documentclass[uplatex]{jsarticle}
\begin{document}
\end{document}

を表示したい時には、以下のようにコードをはりつけました。

<pre class="brush:javascript" title="LaTeX文書作成">\documentclass[uplatex]{jsarticle}<br />\begin{document}<br />\end{document}</pre>

その結果が以下になります。

\documentclass[uplatex]{jsarticle}
\begin{document}
\end{document}


見やすくなっていますね。以上、FC2ブログでコードを行番号付きで表示する方法でした。

関連記事

FC2ブログ(有料版)でFTPの設定をする方法

ブログのはてブ人気エントリーをサイドバーに設置する方法

iPhoneで閲覧しているページのCSSのURLを確認する方法

FC2ブログのスマホ版テーマ「basic_black_st」でのブログタイトルを全て表示する方法

FC2ブログで最新記事にサムネイルを付けてサイドバーを見やすく!

Macでブログを書くならばMarsEditだという理由を熱く熱く書く

FC2ブログで記事のタイトルにブログ名を含めない方法

スポンサーリンク

過去記事セレクション

当ブログの過去記事の中で、オススメの記事25個をまとめたページを作成しました。500記事を超えた中から厳選していますので、どれもオススメできる記事となっています。もしも興味がありましたら、是非一度ご覧ください。
公開記事が500を超えたので、過去記事の中からオススメを25個セレクトしてみました



▼このカテゴリの最新記事
Relate Entry
Entry TAG
ブログ  
Comment
Trackback
Comment form
スポンサードリンク
楽天
2014年7月現在使用しているブログ用iPhoneアプリ16個
iPhoneホーム画面
人気エントリー
先月の人気記事
第1位(→0)
iPhoneにある写真(画像)をセブンイレブンで現像する方法

第2位(→4)
総計290個以上掲載!iPhoneアプリのURLスキーム一覧

第3位(↗︎2)
【iPhone】秘密の質問を忘れたのでAppleのサポートに電話してリセットしてもらった

第4位(↘︎2)
理系大学生なら絶対覚えておくべきWordの数式のショートカット

第5位(↘︎1)
iPhoneのパスコードを10回間違えると再入力までに60分必要

第6位(↘︎1)
SoftbankのiPhone4s→iPhone5sへ機種変更した時の料金試算

第7位(↗︎3)
iPhoneの画面を録画できるMac・Windowsアプリ「Reflector」のインストール方法・使い方

第8位(↘︎4)
iPhone/iPadのパスコードロックを10回間違えた時のデータ消去機能を実行してみた

第9位(↗︎4)
xRecというiPhone画面を録画できるアプリが再び登場!

第10位(↘︎2)
【iPhone】秘密の質問を忘れて間違えすぎるとApple IDが8時間ロックされる

第11位(→0)
iPhoneの写真を1枚5円で現像出来るネットプリントジャパン!

第12位(→0)
パラメータ有りiPhoneアプリのURLスキーム一覧

第13位(↗︎30)
青春18切符で東京から大阪へ~東海道線を突っ走る旅(1日目)

第14位(↗︎55)
青春18切符を利用した旅行時に活躍したiPhoneアプリのまとめ

第15位(↗︎16)
セリアでiPhoneの防水ケースを購入!風呂場で使うときに便利!

全記事表示リンク
サイト内検索
プロフィール

nasimeya

Author:nasimeya
Twitterアカウント→@nasimeya
iPhone5S/iPad3/iPad mini/MacBookAir13inch/Nexus5を現在所持しており、アプリとか紹介を主にしています。LAMYなど文房具もちょくちょく。ブログは楽しく書くことを心掛けております。

日にの観察ブログの更新は停止しています。

新しいブログはこちら⇒なしめやブログ(http://nasimeyablog.com

2013年5月現在利用している主力iPhoneアプリ26個
iPhoneホーム画面
2013年5月現在利用しているブログ用iPhoneアプリ13個
iPhoneホーム画面
iPad mini用おすすめアプリ8選

PAGE TOP