▲PAGE TOP

Bloggerの記事の中に、HTML・JavaScript・PHPコードをハイライト表示する by SyntaxHighlighter


初期設定をする 
すでに初期設定が終了している場合は、下の「設定終了後、新しい記事のHTMLをハイライト表示させるには?」を見る。
Bloggerにソースコードについての記事を投稿するときに便利です。
ハイライト表示もできる定番WEBソフト SyntaxHighlighterをBloggerに埋め込む方法で掲載しています。
  1. How to add syntax highlight to Blogger にアクセスする。
  2. アクセス先から SyntaxHighlighter をダウンロードする
  3. ダウンロードファイルを開き、 Scriptsフォルダと Stylesフォルダを自分のサーバにアップロードする
  4. Blogger管理画面>テンプレート>HTMLの編集
  5. HTML内にある<!-- end outer-wrapper -->の下に、①のコードを入力して保存する
  6. コードをハイライトする「Blogger Syntax Highlighter」ウィジェットにアクセスして、変換ツールに掲載するコードを入力して、言語を”Python”にして変換する
  7. 変換したコードをコピーして、BloggerにHTMLモードで投稿して終了
参照サイト>> How to add syntax highlight to Blogger 

※ハイライト表示は、記事を公開することで表示されます。
ブログ投稿画面の「作成モード」および「HMTLモード」では表示されませんが、公開することによってハイライト表示がされます



設定終了後、新しい記事のHTMLをハイライト表示させるには?
  1. コードをハイライトする「Blogger Syntax Highlighter」ウィジェットにアクセスして、変換ツールに掲載するコードを入力して、言語を”Python”にして変換する
  2. 変換したコードをコピーして、BloggerにHTMLモードで投稿して終了

-------------  以下は参照 ---------------------------


①入力するコード <!-- end outer-wrapper -->の次に、以下のコードを挿入する

<!--▼▼ SyntaxHighlighter▼▼ -->

<link href='http://www.******.com/Styles/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='http://www.******.com/Scripts/shCore.js'/>
<script language='javascript' src='http://www.******.com/Scripts/shBrushPython.js'/>

<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

<!--▲▲ SyntaxHighlighter▲▲ -->


COMMENT 投稿した内容は「 掲示板 」に掲載されます。
ペンネーム(必須)

タイトル

メールアドレス

話題にするページ/ウェブサイトのURL
メッセージ(必須)
アップロードする画像
パスワード(必須)