web-dev-qa-db-ja.com

Bloggerでのブログのコードスニペットの書式設定

私のブログはBloggerでホストされており、C/C#/Java/XMLなどにコードスニペットを頻繁に投稿していますが、スニペットが「破損」していることがわかります。

事前にスニペットを解析してフォーマットを整理し、XML「<」を「&lt;」に変換するために使用できるWebサイトはありますか.

SOには、この領域の周りにいくつかの質問がありますが、この質問に直接対処するものは見つかりませんでした。

Edit: For @ Rich answer、site states "サイトでフォーマットされたコードを表示するには、このCSSスタイルシートを取得し、それへの参照を追加する必要がありますページの<head>セクション」。それが問題です-Blogger AFAIKではこれができません。

formattingblogsblogger
273
nzpcmad

syntaxhighlighter 2.0を使用してブロガーにコード構文の強調表示を追加する方法を説明するブログ投稿エントリを作成しました

これが私のブログ投稿です。

http://www.craftyfella.com/2010/01/syntax-highlighting-with-blogger-engine.html

私はそれが皆さんに役立つことを願っています。

248
CraftyFella

コードを共有する最も簡単な方法は、パブリックGistを使用することです。 1つだけを記述して、埋め込みコードに貼り付けます。簡単です。

http://Gist.github.com

検索エンジンの問題に対処するには、ページ上で次のように簡単に非表示のdivを使用できます。

<div style="display:none"> content </div>
118
yodaisgreen

私のブログでは、ソースコードのフォーマットに http://hilite.me/ を使用しています。それは多くのフォーマットと出力をサポートし、かなりきれいなHTMLです。ただし、コードスニペットが多数ある場合は、コピーペーストを大量に行う必要があります。 Pythonコードのフォーマットには、 Pygments （ ブログ投稿 ）も使用しました。

60
Samuel

このcssスクリプトは、すべての人に役立つ可能性があります-構文の強調表示用ではありませんが、ソースコードを元の形式で表示するのに適しています。

 <pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; 
                color: #000000; background-color: #eee;
                font-size: 12px; border: 1px dashed #999999;
                line-height: 14px; padding: 5px; 
                overflow: auto; width: 100%">
       <code style="color:#000000;Word-wrap:normal;">

            <<<<<<<YOUR CODE HERE>>>>>>>

       </code>
 </pre>

使用方法：

  1. このスニペットをテキストエディターに貼り付け、
  2. コードを<<<<<< >>>>>>ブロックに貼り付けます。
  3. すべてコピーして
  4. blogger（またはその他の）投稿エディターのHTMLビューに貼り付けます。

利点：シンプルで使いやすく、構成が少なく、再構成が簡単で、追加のソフトウェアはありません

37
gtiwari333

これは、SyntaxHighlighterを使用して非常に簡単に実行できます。ブログに BloggerでSyntaxHighlighterを設定するための詳細な手順 があります。 SyntaxHighlighterは非常に使いやすいです。スニペットを生の形式で投稿し、次のようにpreブロックでラップできます。

<pre name="code" class="brush: erlang"><![CDATA[
-module(trim).

-export([string_strip_right/1, reverse_tl_reverse/1, bench/0]).

bench() -> [nbench(N) || N <- [1,1000,1000000]].

nbench(N) -> {N, bench(["a" || _ <- lists:seq(1,N)])}.

bench(String) ->
    {{string_strip_right,
    lists:sum([
        element(1, timer:tc(trim, string_strip_right, [String]))
        || _ <- lists:seq(1,1000)])},
    {reverse_tl_reverse,
    lists:sum([
        element(1, timer:tc(trim, reverse_tl_reverse, [String]))
        || _ <- lists:seq(1,1000)])}}.

string_strip_right(String) -> string:strip(String, right, $\n).

reverse_tl_reverse(String) ->
    lists:reverse(tl(lists:reverse(String))).
]]></pre>

ブラシ名を「python」または「Java」または「javascript」に変更して、選択したコードに貼り付けます。 CDATAタグを使用すると、エンティティのエスケープやその他のコードブログの煩わしさを心配することなく、ほとんどのコードをそこに配置できます。

15
Alain O'Dea

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> 属性。

12
Mahesh Meniya

ここに 1つのサイト があります。これはコードをフォーマットし、htmlを吐き出し、さらに構文の色付けのためのインラインスタイルも含みます。必要に応じてallでは機能しないかもしれませんが、良いスタートです。あなたがそれを拡張したい場合、私は彼がソースを利用可能にしたと信じています：

6
Rich

http://formatmysourcecode.blogspot.co.uk/ は正常に動作します。コピー、フォーマット、貼り付けを行ってください。

6
Gob00st

私は仕事を終わらせるツールを作成しました。あなたは私のブログでそれを見つけることができます：

無料のオンラインC＃コードカラライザー

C＃コードの色付けに加えて、ツールはすべての「<」および「>」記号を「＆lt;」に変換します。および「＆ampgt;」。異なるブラウザで同じように見えるように、タブはスペースに変換されます。ブログやWebサイトにCSSスタイルシートを挿入できない、または挿入したくない場合に備えて、カラー化機能をCSSスタイルにインライン化することもできます。

4
Pavel Vladov

私はかなりローテクのソリューションを使用しています。この オンライン構文の強調表示 ツールを使用してコードをフォーマットし、ブログに貼り付けます

4
Phil Hale

SyntaxHighlighter 2. が変更され、Bloggerでの使用が簡単になったようです。

ホストされているバージョン スタイルとJavascriptには、次の場所にあります。 http://alexgorbatchev.com/pub/sh/

3
Daniel Ballinger

Bloggerのブログで SyntaxHighlighter を使用しています。実際のサイトはBloggerではなく自分のサーバーでホストされています（Bloggerには自分のサイトへの投稿をftpするオプションがあります）が、独自のドメインとWebホスティングは月に数ドルしかかかりません。

3
Pete Kirkham

実際、私は（他に何を使用しました;-)）これにVimを使用しました：2htmlの「プラグイン」があります。 こちらのドキュメント をご覧ください。

したがって、コードを編集するときは、それをHTMLに変換し、結果をBloggerのHTMLエディターに貼り付けます。

注：それはそれほど美しいHTMLではありません（埋め込みcssの方が良いでしょう）が、動作するだけです。

ああ：それにいくつかの言語の構文ファイルがあり、とても便利です。

2
Zsolt Botykai

Emacs固有の回答：ブロガーに関する限り、インラインcssを許可します。 javascriptベースの蛍光ペンの問題は、その配色を使用するか、独自の配色を実装する必要があることです。しかし、私のように、あなたがあなた自身のemacsカラースキームのファンであるならば、あなたはより良い選択肢を利用できます。 emacsの「htmlize.el」パッケージをハックして、次の4つの関数を追加しました...

  1. blog-htmlize-buffer
  2. blog-htmlize-region
  3. blog-htmlize-buffer-with-linum
  4. blog-htmlize-region-with-linum

これらの関数は、コピーアンドペースト可能なHTML（インラインスタイル）をemacsの新しいバッファーに出力します。これはブログの投稿で直接使用できます。出力は、emacsのコード（配色を含む）とまったく同じに見えます。

ここに 私のブログへのリンク があり、emacsで "blog-htmlize.el"を使用する方法の詳細情報を見つけることができます。これにより、「小なり」および「大なり」記号もHTMLエンコードされなくなります。また、emacsはすべての強調表示とスタイリングを行うため、jsライブラリがスニペットの言語をサポートするかどうかを心配する必要も、ブロガーでテンプレートコードを操作する必要もありません。

elisp file here （ファイルをblog-htmlize.elとして保存）を見つけることができます

1
Sujeet

Html、javascript、c＃、およびJavaを投稿するには、特殊文字をHTMLコードに変換する必要があります。 '<' as &lt; and '>' as _&gt; and e.t.c ..

このリンクを追加 コードコンバーター iGoogleに。これは、特殊文字を変換するのに役立ちます。

次に、 SyntaxHighlighter 3.0.8 新しいバージョンを追加して、ブロガーのコードをカスタマイズします。ただし、ブロガーテンプレートでsyntaxHighlighterを構成する方法を知っている必要があります。

0
Mdhar9e

私は自分でF＃を作成しました（ this の質問を参照）が、それでもまだ完全ではありません（正規表現を実行するだけなので、クラスやメソッド名などを認識しません）。

基本的に、作成モードとHTMLモードを切り替えると、ブロガーエディターが山括弧を食べることがあります。したがって、HTMLモードに貼り付けてから直接保存する必要があります。 （私はこれで間違っているかもしれませんが、今試してみて、うまくいくようです-ブラウザに依存しますか？）

ジェネリックを持っていると恐ろしいです！

0
Benjol