ラベル

2013年12月26日

Blogger に SyntaxHighliter を導入してみる

SyntaxHighlighter なんていうステキなものを発見。
こんな感じにソースコード書いてあるサイト、よくありますよねぇ。

#!/usr/bin/python
# -*- coding: utf-8 -*-
print("Hello World")

Bloggerって、HTMLテンプレートをかなり柔軟にイジっていいみたいですね。
  1. [テンプレート] [HTML編集]をクリック
  2. <head>の中に、SyntaxHighliterのスタイルとスクリプトを追加する。
<head>
    <meta charset='utf-8'/>
    <meta content='width=device-width, initial-scale=1.0' name='viewport'/>
    <!-- Syntax Highlighter Scripts Generator -->
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
    <script language='javascript' type='text/javascript'>
      SyntaxHighlighter.config.bloggerMode = true;
      SyntaxHighlighter.all();
    </script>
    <style>
      .syntaxhighlighter {
        overflow: auto !important;
        overflow-y: hidden !important; }
     .syntaxhighlighter .toolbar{ display:none !important }
    </style>

<pre>タグ中に使えない文字(<>"'など)をエスケープするには、preタグメーカーを使えばいいみたい。
ラベル: ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)