Bloggerでのブログ用のコードスニペットのフォーマット[終了]

282

私のブログはブロガーでホストされていると私で頻繁にポストコードスニペットれるC/ C#/ Java/ XMLなどが、私はスニペットは、「マングル」を取得します見つけます。

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

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

Edit:@Richの答えは、サイトの状態が「あなたのサイト上でフォーマットされたコードを表示するには、このCSSスタイルシートを取得し、そして、それへの参照を追加する必要が<head>あなたのページのセクション」。それが問題です。BloggerAFAIKではこれを行うことはできません。

formatting  blogs  blogger 
— ラブレイブ
ソース
3
フォーマットされたコードを表示するには：Visual Studioを使用している場合は、html / css / javascript / c＃などのコードをブロガーにコピーできます。ビジュアルスタジオ生産性パワーツールをインストールする必要があります。詳細については、coding-issues.blogspot.in
— 2013/10
Bloggerオフラインエディター用のWindows Live WriterのプラグインPaste As Visual Studio Codeを試してください。WYSIWYG！。
— herohuyongtao 2013
あなたが欠落しているソーシャルコンテンツロッカーワードプレスなどを？今、あなたもブロガーでこれを追加することができますstackoverflow.com/questions/27619171/...
— LERRクレイグ
1
このWebサイトを使用して、さまざまな言語のコードスピネットハイライトコードを取得できます。htmlでブログに投稿できますhilite.me
— Bhavikkumar
intellijでコードをコピーして、ブログに貼り付けることができます。それは私のブログの魅力のように機能します-codetails.blogspot.com/2017/11/design-pattern-in-java.html
— user3871494 '20

回答:

253

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

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

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

それが皆さんのお役に立てば幸いです。私はそれができることにはかなり感心しています。

— CraftyFella
ソース
2
これがまだ機能するかどうか誰でも確認できますか？</head>セクションの直前にscriptタグを貼り付けてみて、コードの前後にpreタグも追加しました。変更はありません。
— arviman
2
私はそれに数時間費やしましたが、これをまったく機能させることができません。
— thepaulpage 2013年
1
DYNAMICビューブロガーではうまく機能しません。代替手段を提供できますか？動的ビューsatindersinght.blogspot.inを
— Satinder sing
1
コピーして貼り付けることになっているコードの上部に、特に<script>タグが欠けているようです。
— ジョンリトル
1
サミュエルの答えははるかに優れています。単なる構文の強調表示のために、ブログに多くのJavaScriptを追加したくありません。特に、強調表示する構文がないページはやり過ぎです。
— divinedragon 2017年
126

コードを共有する最も簡単な方法は、公開要旨を使用することです。1つ作成して、埋め込みコードに貼り付けるだけです。かんたん。

http://gist.github.com

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

<div style="display:none"> content </div>
— ヨーダイスグリーン
ソース
おい、20分くらい使ってみて、本当にありがとう！最高のフォーマット、煩わしさなし、すべてのコードが1か所にあり、投稿は美しく見えます。コードを他の投稿と混同せず、心配することなく投稿を編集できます。何かばかげて、コードをなくしたり、誤ったフォーマットにしたりする。ありがとう！
— Elijah Saounkine
19
埋め込みはjavascriptであり、検索しても見えない可能性が十分にあります。ブログの投稿では、それはほとんどの場合それを殺します。
— James Moore、
6
私は現在要旨を使用していますが、おそらく再度SyntaxHighlighterを使用します。gistはJavaScriptを使用するだけでなく（RSSリーダーでもアクセスできなくなります）、すべてのgistが順次ダウンロードされてレンダリングがブロックされるため、ページの読み込みが遅くなります。良い選択ではありません。
— Tomasz Nurkiewicz
ありがとう！あなたは私の日を作りました。ブロガーに要点を追加するためのこのスクリプトを共有します：github.com/moski/gist-Blogger
— daniel.sedlacek
1
このアイデアは本当にうまくいきます！結果は私が欲しいだけです。きれいにフォーマットされたコード...しかし、私はそれで行きません。私は自分の投稿をそれ自体で完全なものにしたいと思っています。投稿の一部であり、他の場所でホストされ、jsを介して含まれるコードを持つことは、それを打ち負かすだけです！
— 2014年
63

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

— サミュエル
ソース
以前はhilite.meを使用していましたが、今ではdillinger.io
— GoYun.Info
これもgist.githubよりも好みます。JavaScriptおよび追加のスタイル/ CSSは必要ありません。ありがとうございます。
— Prabowo Murti、
40

この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. ブロガー（またはその他の）投稿エディターでHTMLビューに貼り付けます。

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

— gtiwari333
ソース
1
私の意見では最もシンプルできちんとした返信です。内部CSSを作成するだけで準備完了です。
— Rishik Mani
私にとってもうまくいきます。簡単な解決策
— Hasitha
15

これは、SyntaxHighlighterでかなり簡単に実行できます。私が持っているブロガーに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タグ付けを使用すると、エンティティのエスケープやその他の一般的なコードブログの煩わしさを心配することなく、ほとんどすべてのコードを配置できます。

— アラン・オディア
ソース
1
あなたの指示は私にとって他の主要な答えよりもうまくいきました。場合には誰もが、彼らのために探して自分自身見つかっここバンドルブラシとそのエイリアスのリストです。
— スコット
13

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. ここで コードをエスケープできます。
8. 以下は、<class>属性でサポートされている言語のリストです。

— マヘシュ・メニヤ
ソース
素敵なリンク。それはそれをカラーフォーマットした方がいいでしょう！+1
— Gaʀʀʏ
@le_garry：コードスニペットのフォーマット中に問題が発生したため、カラーにならないことに感謝します。
— Mahesh Meniya
gissolvedによる回答を参照してください。これまでに見た中で最高の蛍光ペンで、色を付けています。
— Gaʀʀʏ
@le_garryおお、あなたはBloggerで構文を強調表示することについて考えています。色でうまく機能します。私は..あなたは、だから私の答えについて取っている、私は顔にいくつかのproblmを持っていたことは悲しい持っていたと誤解
— マヘシュMeniya
@MaheshMeniya私は構文syntaxhighlighterに対して記述したすべての手順に従いましたが、機能しません。
— AA.SC 2014年
5

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

— フィル・ヘイル
ソース
うん-tohtmlは、コードを貼り付けるためにTechNet Wikiによって推奨されるソリューションです
— rbrayb '19年
@Phil Haleそのツールにはインデントがありません
— user2771655 14年
これは私が今まで見つけた最良の解決策です。ありがとう
— Kinjal 2018
5

これは、コードをフォーマットしてhtmlを出力するサイトの1つで、構文の色付けのためのインラインスタイルも含まれています。すべてのニーズに対応できるわけではありませんが、良いスタートです。あなたがそれを拡張したいなら、彼はソースを利用可能にしたと私は信じています：

— リッチ
ソース
もう機能しません。
— ΕГИІИО
4

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

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

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

— パベル・ブラドフ
ソース
3

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

— ピートカーカム
ソース
同意します-自分のブログをホストする場合、いくつかのオプションがありますが、ブログが実際にBloggerでホストされている場合、サポートはあまりありません。
— rbrayb 2009年
2

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

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

注：これはそれほど美しいHTMLではありません（埋め込みCSSの方が優れています）が、機能するだけです。

ああ、それはいくつかの言語用の構文ファイルを持っているので、とても便利です。

— Zsolt Botykai
ソース
1

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ファイルを（ファイルの名前を付けて保存ブログ-htmlize.el）

— スジート
ソース
0

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

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

ジェネリック医薬品があると恐ろしいことです！

— ベンジョル
ソース
0

html、javascript、c＃、javaを投稿するには、特殊文字をHTMLコードに変換する必要があります。など'<'など&lt;と'>'する &gt;となど

このリンクCode ConverterをiGoogleに追加します。これは、特殊文字を変換するのに役立ちます。

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

— Mdhar9e
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.