Formatieren von Codefragmenten zum Bloggen in Blogger [geschlossen]

282

Mein Blog wird auf Blogger gehostet und ich poste häufig Code-Snippets in C/ C#/ Java/ XMLusw., aber ich finde, dass das Snippet "verstümmelt" wird.

Gibt es Websites, auf denen ich das Snippet vorher analysieren und die Formatierung sortieren, XML " <" in " &lt;" usw. konvertieren könnte?

Es gibt eine Reihe von Fragen zu diesem Bereich auf SO, aber ich konnte keine finden, die diese Frage direkt beantworten.

Edit:Für die @ Rich- Antwort heißt es auf der Site: "Um den formatierten Code auf Ihrer Site anzuzeigen, müssen Sie dieses CSS-Stylesheet <head>abrufen und im Abschnitt Ihrer Seite einen Verweis darauf hinzufügen . " Das ist das Problem - Sie können dies in Blogger AFAIK nicht tun.

formatting blogs blogger rbrayb
quelle
3
So zeigen Sie den formatierten Code an: Wenn Sie Visual Studio verwenden, können Sie jede Art von Code html / css / javascript / c # usw. in Blogger kopieren. Sie müssen Elektrowerkzeuge für die Visual Studio-Produktivität installieren: Weitere Informationen finden Sie unter : oding-issues.blogspot.in/2013/10/…
Ranadheer Reddy
Versuchen Sie das Plug-in Einfügen als Visual Studio-Code für Windows Live Writer für Blogger Offline-Editor. WYSIWYG! .
Heldhuyongtao
Vermissen Sie Social Content Locker wie WordPress? Jetzt können Sie dies auch in Blogger Stackoverflow.com/questions/27619171/…
Craig Lerr
1
Auf dieser Website können Sie Code-Spinett-Highlight-Code für verschiedene Sprachen abrufen. Es gibt Ihnen HTML, Sie können es in Ihrem Blog hilite.me
Bhavikkumar
Sie können den Code in Intellij kopieren und in Ihr Blog einfügen. Es funktioniert wie ein Zauber für mich in meinem Blog - codetails.blogspot.com/2017/11/design-pattern-in-java.html
user3871494

Antworten:

253

Ich habe einen Blogeintragseintrag erstellt, in dem erklärt wird, wie Blogger mithilfe des Syntaxhighlighter 2.0 Code-Syntax-Hervorhebungen hinzufügen

Hier ist mein Blog-Beitrag:

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

Ich hoffe es hilft euch. Ich bin ziemlich beeindruckt von dem, was es kann.

CraftyFella
quelle
2
Kann jemand bestätigen, ob dies noch funktioniert? Ich habe versucht, das Skript-Tag kurz vor dem </head>Abschnitt einzufügen, und das Pre-Tag auch um meinen Code hinzugefügt. Keine Änderung.
Arviman
2
Ich habe ein paar Stunden damit verbracht und ich kann das überhaupt nicht zum Laufen bringen.
Thepaulpage
1
Es funktioniert nicht gut für DYNAMIC View Blogger. Können Sie eine Alternative anbieten? Hier ist mein Blog mit dynamischer Ansicht satindersinght.blogspot.in
Satinder singh
1
Es sieht so aus, als ob dem Code, den Sie kopieren und einfügen sollen, oben etwas fehlt, insbesondere ein <script> -Tag.
John Little
1
Samuels Antwort ist viel besser. Ich mag es nicht, so viele Javascripts in meinem Blog hinzuzufügen, nur um die Syntax hervorzuheben. Besonders die Seiten, die keine Syntax haben, um hervorgehoben zu werden, sind ein Overkill.
Divinedragon
126

Der einfachste Weg, Code zu teilen, ist mit einem öffentlichen Kern. Schreiben Sie einfach einen auf und fügen Sie ihn in den Einbettungscode ein. Kinderleicht.

http://gist.github.com

Um das Suchmaschinenproblem zu beheben, kann man divauf der Seite versteckt so einfach verwenden wie:

<div style="display:none"> content </div>
yodaisgreen
quelle
Alter, nachdem ich es 20 Minuten lang benutzt habe, kann ich dir nicht genug danken! Die beste Formatierung, kein Ärger, der gesamte Code befindet sich an einem Ort, die Beiträge sehen einfach wunderschön aus, die Bearbeitung eines Beitrags ist unglaublich einfach, da Sie den Code nicht mit dem Rest des Beitrags verwechseln und sich keine Sorgen machen, dass Sie dies tun etwas Dummes und Code verlieren / falsch formatieren. Danke Mann!
Elijah Saounkine
19
Die Einbettung ist Javascript, es besteht eine gute Chance, dass die Suche unsichtbar ist. Das tötet es so ziemlich für Blog-Beiträge.
James Moore
6
Ich verwende derzeit Gists, werde aber wahrscheinlich wieder SyntaxHighlighter verwenden. Gists verwenden nicht nur JavaScript (wodurch sie auch in RSS-Readern nicht zugänglich sind), sondern verlangsamen auch das Laden von Seiten, da jedes Gist nacheinander heruntergeladen wird und das Rendern blockiert. Keine gute Wahl.
Tomasz Nurkiewicz
Vielen Dank! Du hast meinen Tag gerettet. Ich werde nur dieses Skript für das Hinzufügen von Gist zu Blogger teilen: github.com/moski/gist-Blogger
daniel.sedlacek
1
Diese Idee funktioniert wirklich gut! das Ergebnis ist nur wollen, dass ich brauche; schön formatierter Code ... aber ich werde nicht damit anfangen. Ich möchte lieber, dass mein Beitrag an und für sich vollständig ist. Wenn der Code, der Teil des Beitrags ist, an anderer Stelle gehostet und über js eingefügt wird, ist das nur eine Niederlage!
Dade
63

Für mein Blog verwende ich http://hilite.me/, um den Quellcode zu formatieren. Es unterstützt viele Formate und gibt eher sauberes HTML aus. Wenn Sie jedoch viele Codefragmente haben, müssen Sie viel kopieren und einfügen. Zum Formatieren von Python-Code habe ich auch Pylements ( Blogpost ) verwendet.

Samuel
quelle
Früher habe ich verwenden hilite.me , aber jetzt ziehe ich dillinger.io
GoYun.Info
Ich ziehe dies auch gist.github vor. Kein Javascript und zusätzlicher Stil / CSS erforderlich. Danke mein Herr.
Prabowo Murti
40

Dieses CSS-Skript kann für alle nützlich sein. Es dient nicht zur Hervorhebung der Syntax, eignet sich jedoch gut zur Darstellung des Quellcodes im Originalformat:

 <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>

Wie benutzt man :

  1. Fügen Sie dieses Snippet in den Texteditor ein.
  2. Fügen Sie Ihren Code in den Block <<<<<< >>>>>> ein.
  3. Kopieren Sie alle und
  4. Einfügen in die HTML-Ansicht im Blogger (oder einem anderen) Post-Editor.

VORTEILE: Einfach und benutzerfreundlich , weniger Konfiguration, einfach neu zu konfigurieren, keine zusätzliche Software

gtiwari333
quelle
1
Die einfachste und ordentlichste Antwort meiner Meinung nach. Erstellen Sie einfach ein internes CSS und los geht's.
Rishik Mani
funktioniert auch gut für mich. einfache Lösung
Hasitha
15

Dies kann mit SyntaxHighlighter ziemlich einfach durchgeführt werden. Ich habe schrittweise Anweisungen zum Einrichten von SyntaxHighlighter in Blogger in meinem Blog. SyntaxHighlighter ist sehr einfach zu bedienen. Sie können Snippets in Rohform veröffentlichen und sie dann in preBlöcke wie folgt einschließen:

<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>

Ändern Sie einfach den Pinselnamen in "Python" oder "Java" oder "Javascript" und fügen Sie den Code Ihrer Wahl ein. Mit dem CDATA-Tagging können Sie so ziemlich jeden Code einfügen, ohne sich Gedanken über das Entkommen von Entitäten oder andere typische Belästigungen beim Code-Bloggen machen zu müssen.

Alain O'Dea
quelle
1
Ihre Anweisungen haben für mich besser funktioniert als die andere führende Antwort. Falls jemand nach ihnen sucht, finden Sie hier die Liste der gebündelten Pinsel und ihrer Aliase.
Scott
13

1. Erstellen Sie zunächst eine Sicherungskopie Ihrer Blogger-Vorlage.
2. Öffnen Sie anschließend Ihre Blogger-Vorlage (im HTML-Bearbeitungsmodus) und kopieren Sie alle in diesem Link angegebenen CSS vor dem </b:skin>Tag.
3. Fügen Sie den folgenden Code vor dem </head>Tag ein

<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. Fügen Sie den folgenden Code vor dem </body>Tag ein.

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

5. Speichern Sie die Blogger-Vorlage.
6. Jetzt kann die Syntaxhervorhebung verwendet werden. Sie können sie mit dem <pre></pre>Tag verwenden.

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

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

7. Sie können den Code entkommen hier .
8. Hier ist eine Liste der unterstützten Sprache für <class>Attribute.

Mahesh Meniya
quelle
Ein schöner Link. Wäre besser, wenn es farblich formatiert wäre! +1
Gaʀʀʏ
@le_garry: Danke, ich hatte ein Problem beim Formatieren des Code-Snippets, damit es nicht in Farbe ist.
Mahesh Meniya
Siehe die Antwort von gissolved. Der beste Textmarker, den ich bisher gesehen habe, und er färbt.
Gaʀʀʏ
@le_garry Ohh, Sie möchten die Syntax in Blogger hervorheben. Es funktioniert gut mit Farbe. Ich verstehe falsch, dass Sie über meine Antwort nehmen Also war ich traurig, dass ich ein Problem hatte ..
Mahesh Meniya
@ MaheshMeniya Ich habe alle Schritte befolgt, die Sie für Syntax Syntaxhighlighter geschrieben haben, aber es funktioniert nicht. Gibt es zusätzliche Überlegungen, was mir fehlt?
AA.SC
9

http://formatmysourcecode.blogspot.co.uk/ funktioniert einwandfrei. Sie müssen nur kopieren, formatieren und wieder einfügen.

Gob00st
quelle
Ich benutze dies für meinen Blog. Für Menschen, die Farben lieben, ist dies jedoch kein Farbcode! Ich liebe es schlicht und einfach.
Aravind
5

Ich benutze eine ziemlich Low-Tech-Lösung. Ich formatiere den Code mit diesem Online- Tool zur Hervorhebung der Syntax und füge ihn dann einfach in das Blog ein

Phil Hale
quelle
Yup - tohtml ist die vom TechNet Wiki empfohlene Lösung zum Einfügen von Code!
Rbrayb
@Phil Hale Es gibt keine Einrückung in diesem Tool
user2771655
Dies ist die beste Lösung, die ich bisher gefunden habe. Vielen Dank
Kinjal
5

Hier ist eine Site , die Ihren Code formatiert und HTML ausspuckt. Sie enthält sogar Inline-Stile für die Syntaxfärbung. Funktioniert möglicherweise nicht für alle Ihre Anforderungen, ist aber ein guter Anfang. Ich glaube, er hat die Quelle zur Verfügung gestellt, wenn Sie sie erweitern möchten:

Reich
quelle
Funktioniert nicht mehr
Г И І І
4

Ich habe ein Tool erstellt, das die Arbeit erledigt. Sie finden es auf meinem Blog:

Kostenloser Online C # Code Colorizer

Neben der Färbung Ihres C # -Codes kümmert sich das Tool auch um alle Symbole '<' und '>', die sie in '& lt;' und '& gt;'. Tabulatoren werden in Leerzeichen konvertiert, um in verschiedenen Browsern gleich auszusehen. Sie können den Colorizer sogar in die CSS-Stile einbinden lassen, falls Sie kein CSS-Stylesheet in Ihr Blog oder Ihre Website einfügen können oder möchten.

Pavel Vladov
quelle
3

Ich verwende SyntaxHighlighter mit meinem Blogger-Blog. Die eigentliche Site wird auf meinem eigenen Server und nicht auf dem von Blogger gehostet (Blogger hat die Möglichkeit, Beiträge auf Ihre eigene Site zu übertragen), aber eine eigene Domain und ein eigenes Webhosting kosten nur ein paar Dollar pro Monat.

Pete Kirkham
quelle
Einverstanden - Es gibt eine Reihe von Optionen, wenn ich mein eigenes Blog hoste, aber es scheint nicht viel Unterstützung zu geben, wenn das Blog tatsächlich von Blogger gehostet wird.
Rbrayb
2

Eigentlich hatte ich dafür (was noch ;-)) Vim verwendet: Es hat ein 2html "Plugin". Siehe die Dokumente hier .

Wenn ich meinen Code bearbeite, konvertiere ich ihn einfach in HTML und füge die Ergebnisse in den HTML-Editor von Blogger ein.

Hinweis: Es ist nicht so schön HTML (eingebettetes CSS wäre besser), aber es funktioniert einfach.

Oh: und es hat Syntaxdateien für mehrere Sprachen, was es ziemlich nützlich macht.

Zsolt Botykai
quelle
1

Emacs spezifische Antwort: Was Blogger betrifft, erlaubt es Inline-CSS. Das Problem mit Javascript-basierten Textmarkern ist, dass Sie mit ihrem Farbschema leben oder Ihr eigenes implementieren müssen. Aber wie ich, wenn Sie ein Fan Ihres eigenen Emacs-Farbschemas sind, haben Sie eine viel bessere Option zur Verfügung. Ich habe das Paket "htmlize.el" für Emacs gehackt, um die folgenden vier Funktionen hinzuzufügen ...

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

Diese Funktionen geben kopierfertiges HTML (Inline-Stil) in einem neuen Puffer in Emacs aus, den Sie direkt in Ihrem Blog-Beitrag verwenden können. Die Ausgabe sieht genauso aus wie der Code in Emacs (einschließlich des Farbschemas).

Hier ist ein Link zu meinem Blog , wo Sie detaillierte Informationen zur Verwendung von "blog-htmlize.el" mit Emacs finden. Dadurch entfällt auch die HTML-Codierung der Zeichen "kleiner als" und "größer als". Und da emacs das Hervorheben und Stylen übernimmt, müssen Sie sich keine Gedanken darüber machen, ob die js-Bibliothek die Sprache Ihrer Snippets unterstützt, und Sie müssen sich auch nicht in Ihren Vorlagencode in Blogger einmischen.

Die elisp-Datei finden Sie hier (speichern Sie die Datei als blog-htmlize.el )

Sujeet
quelle
0

Ich habe mein eigenes in F # gerollt (siehe diese Frage), aber es ist immer noch nicht perfekt (ich mache nur reguläre Ausdrücke, daher erkenne ich keine Klassen oder Methodennamen usw.).

Nach allem, was ich sagen kann, frisst der Blogger-Editor manchmal Ihre spitzen Klammern, wenn Sie zwischen dem Verfassen- und dem HTML-Modus wechseln. Sie müssen also in den HTML-Modus einfügen und dann direkt speichern. (Ich kann mich irren, habe es gerade versucht und es scheint zu funktionieren - browserabhängig?)

Es ist schrecklich, wenn Sie Generika haben!

Benjol
quelle
0

Um HTML, Javascript, C # und Java zu veröffentlichen, sollten Sie Sonderzeichen in HTML-Code konvertieren. wie '<'als &lt;und '>'zu &gt;und etc.

Fügen Sie diesen Link Code Converter zu iGoogle hinzu. Dies hilft Ihnen beim Konvertieren der Sonderzeichen.

Dann fügen Sie Syntax 3.0.83 eine neue Version der Code in Blogger anzupassen. Sie sollten jedoch wissen, wie Sie den syntaxHighlighter in Ihrer Blogger-Vorlage konfigurieren.

Mdhar9e
quelle