2012-04-26 6 views
60

ブロガーの新しいインターフェイスで構文ハイライトを設定する方法。多くのオプションを試してみましたが、うまくいきませんでした。ブロガーで構文ハイライトを設定する方法

+7

質問を閉じるにはどうすればよいですか?質問があいまいな場合は、編集することができます。答えは良いものであり、尋ねられる問題を解決するのに役立ちました。おそらくこれをwebapps.stackexchange.comに移動しますか? – hanxue

+3

絶対に愚かで自己矛盾した近い理由、SOにとっては非常に正常です。ブロガーの構文ハイライトについては、github gistコードの埋め込み、youtubeに投稿して動画を埋め込む方法を使用してください。 – Val

+0

私はそのガイドを自分のサイトで利用できると思っています。 ここでブロガーのためのソーシャルコンテンツロッカーを見なければなりません--- http://stackoverflow.com/questions/27619171/social-content-locker-for-blogger -com-blogs-is-possible –

答えて

22

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

それはスクリーンショットとすべてとチュートリアル本当に簡単に「ブロガーのためのSyntaxHighlighter」です。

ほんの数分で起動してください。

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

これが役に立ちます。ハッピーコーディング。

+0

このリンクは素晴らしいです。私は私の[ソフトウェア開発ブログ](http://www.ayp-sd.blogspot.com)にコードハイライトを組み込むためにそれを使用しました。あなたが覚えておかなければならないのは、強調表示されたコードが投稿を公開した後にのみ表示されることです。プレビューするだけで、コードは強調表示されません。この動作は最初は少し混乱していました。 –

+0

私は問題を抱えていて、これは私のために働いた。私はちょうどそれがオートローダーを使用するガイドだったらいいと思う。 – Xarcell

125

1.まず、</b:skin>タグ
3.貼り付け前&は、すべてのCSS given in this linkコピー(編集HTMLモードで)Bloggerのテンプレートを開き、その後、あなたのブロガーのテンプレート
2.のバックアップを取ります</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.前followigコードは、前に次のコードを貼り付けます。 </body>タグ。

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

5.保存ブロガーのテンプレート。
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.Hereは、<class>属性のサポートされている言語のリストです。

+1

ありがとう@マシェッシュ.. :)私の仕事をしました。 –

+0

」のようないくつかの.jsを削除するとページの読み込み時間が大幅に短縮されます – Deepscorn

+1

Googleコードがシャットダウンされます。これはもう動作しないかもしれません – Jalal

0

テンプレートに応じて、コンテンツが読み込まれる前にSyntaxHighlighter JavaScriptコードが実行されることがあります。その場合、短いタイムアウト後に実行するようにコードを変更すると、問題が解決されます。テンプレートのHTMLの<head>でこれを試してみてください:

<script type="text/javascript"> 
window.setTimeout(function() { 
    SyntaxHighlighter.config.bloggerMode = true; 
    SyntaxHighlighter.all(); 
}, 10); 
</script>

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

あなたはこのようないくつかのCSSを追加し、SyntaxHighlighterコード表示のルックアンドフィールをカスタマイズしたい場合は、次の

.syntaxhighlighter code { 
    font-family: Consolas !important; 
    font-size: 10px !important; 
}

!importantはSyntaxHighlighterのテーマの定義を上書きする必要があります。

関連する問題