スポンサーサイト

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

ブログにソースコードを埋め込む

 せっかくブログをメモとして使うなら、やっぱりコードもカッコ良く表示したいと思います。
 どうやってやるんだろうと調べると、「SyntaxHighlighter」というのを使うらしい。

↓↓ 以下、このページの内容を適用してソースを表示しています。
 
 参考にしたサイトはこれ
 →FC2 ブログでSyntaxHighlighterを使ってソースコードを表示する。

 まずはダウンロードします。 
 SyntaxHighlighter
 
syntaxhighlighter

 右からdownloadをクリック。(今日の時点では 3.0.83. でした。)
 続いて出てくる画面でもClick here to download.をクリック

 あっという間にダウンロードが終わるので、デスクトップにでも解凍します。

 必要なファイルは以下のとおり。
 
 ・「styles」フォルダ内の「shCore.css」
        〃      「shCoreDefault.css]
 ・「scripts」フォルダ内の使用する言語に対応したファイル

 以上のファイルをブログにアップロードするのですが、今後どんな言語を触るかわからないので「scripts」内のファイルはとりあえず全部あげておきます。

 FC2ブログでのアップロードは、この書き込み画面の右側、「ファイルのアップロード」から。
 領域にファイルを最大5個ずつドラッグしてはせっせとアップしていきます。
 (ほんとにこんなも使うのか?)

ファイルアップロード1

 アップロードできたら、ファイル一覧のファイル情報から、アップロード先を確認しておきます。

 例→ http://blog-imgs-75.fc2.com/a/b/c/xxxxx
後々、この共通部分をコピー出来るように表示ておくと楽かも。

ファイルアップロード2

 次に、同じく右側のメニューから「テンプレートの設定」から、適用したいテンプレートの「編集」をクリックします。
 HTML編集の下にあるHTMLの中のから の間に、以下の文を貼り付けます。
 (今回は の直前に入れました。)
 「アップロード先」は先ほど確認したものを当てはめます。
 







 更に、以下の文を、下の方の
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。
直前に入れます。
 「アップロード先」を置き換えるのを忘れずに。










 
 プレビューでなんとも無かったら更新。

 使い方は、まず表示したいソースコードを、変換ページに通して変換します。
 これをしないと < や > や & や ” を、実際に使うソースコードなのか表示用なのか判別できなくなってしまうからだとのこと。

 変換はこのページ等が楽かも。(「<pre></pre>」タグで囲む のチェックを外すこと。)
ソースを「そのまま表示する為のHTMLソース」に変換

 ソースコードを変換したら、ブログの本文に貼り付けます。
 その後、貼り付けた変換済みソースを、以下の記述で挟みます。



 変換済みソースコード



 ここで、「使用する言語」の部分は、使用する言語に合わせた言語コードを入れます。
 例えば・・・

 ・ HTML なら html
 ・ Python なら py か python

 他の言語は参考サイトで確認してください。
FC2 ブログでSyntaxHighlighterを使ってソースコードを表示する。 

 早速確認してみると…うーん。
 なぜか最後に2行空白が追加されるのと、メニューや色付けが無かったりする。
 まだまだ設定をやりつくしてないんだろうな。

 たぶん続く。
 

 → 2015.06.01 追記

  ブログの色付けを行いました!(SyntaxHighlighterのデザインをいじる。

  但し、テンプレートで一括して編集したのでこのページの分も変わっています(^^;
  話がわかりづらくてごめんなさい。
スポンサーサイト

コメントの投稿

管理者にだけ表示を許可する
プロフィール

SiO_the_ORANGE

Author:SiO_the_ORANGE
 
DIYとか自作とか修理って言葉に反応します。

 いろんなことを勉強しながらちょっとずつ出来ることを増やしていこうと目論むブログです。

 情報というよりメモですが、お気付きの点あればいろいろ教えてください。

コメント大歓迎です!

最新トラックバック

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