web-dev-qa-db-ja.com

Bloggerで構文ハイライターを設定するにはどうすればよいですか？

Bloggerの新しいインターフェースで構文ハイライターを設定するにはどうすればよいですか？私は多くのオプションを試しましたが、何もうまくいきませんでした。提案をお願いします。

syntax-highlightingbloggersyntaxhighlighter
63
Anil

1。 最初に、ブロガーテンプレートのバックアップを取ります
2。 その後、ブロガーテンプレートを開き（HTML編集モードで）、すべてのcssをコピーします このリンクで指定</b:skin>タグの前
3。 </head>タグの前に次のコードを貼り付けます

<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>

4。 </body>タグの前に次のコードを貼り付けます。

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

5。 Bloggerテンプレートを保存します。
6。 これで、構文強調表示を使用する準備ができました。<pre></pre>タグで使用できます。

<pre name="code">
...Your html-escaped code goes here...
</pre>

<pre name="code" class="php">
    echo "I like PHP";
</pre>

7。 コードをエスケープできます here 。
8。 ここ は、サポートされている言語のリストです <class> 属性。

129
Mahesh Meniya

チェックアウト http://oneqonea.blogspot.com/2012/04/how-do-i-add-syntax-highlighting-to-my.html

これは、スクリーンショットなどすべてを備えた非常に簡単な「BloggerのSyntaxHighlighter」チュートリアルです。

わずか数分で稼働するはずです。

また、チュートリアルは、参照している「新しいインターフェイス」を中心に構築されています。

お役に立てれば。ハッピーコーディング。

22
John Erck

テンプレートによっては、コンテンツがロードされる前にSyntaxHighlighter JavaScriptコードが実行される場合があります。その場合、短いタイムアウト後に実行するようにコードを変更すると、問題が修正されます。テンプレートHTMLの_<head>_でこれを試してください：

<script type = "text/javascript"> 
 window.setTimeout（function（）{
 SyntaxHighlighter.config.bloggerMode = true; 
 SyntaxHighlighter.all（）; 
}、10）; 
 </ script>

ScriptHighlighter.all()を呼び出す前に、デフォルトのカスタマイズをさらに追加できます。

SyntaxHighlighterコード表示のルックアンドフィールをカスタマイズする場合は、次のようなCSSを追加します。

.syntaxhighlighterコード{
 font-family：Consolas！important; 
 font-size：10px！important; 
}

_!important_は、SyntaxHighlighterテーマ定義をオーバーライドするために必要です。

0
grkvlt