web-dev-qa-db-ger.com

Wie richte ich in Blogger einen Syntax-Textmarker ein?

Wie richte ich einen Syntax-Textmarker auf der neuen Oberfläche von Blogger ein? Ich habe es mit vielen Optionen versucht, aber nichts hat funktioniert. Bitte machen Sie Vorschläge.

63
Anil

1. Erstellen Sie zunächst eine Sicherungskopie Ihrer Blogger-Vorlage
2. Öffnen Sie danach Ihre Blogger-Vorlage (im HTML-Bearbeitungsmodus) und kopieren Sie das all css in diesem Link angegeben vor das </b:skin> - Tag
3. Fügen Sie den folgenden Code vor dem Tag </head> 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 Tag </body> Ein.

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

5. Speichern Sie die Blogger-Vorlage.
6. Jetzt können Sie die Syntaxhervorhebung mit dem Tag <pre></pre> 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 Ihren Code entkommen hier .
8. Hier ist eine Liste der unterstützten Sprachen für <class> Attribut.

129
Mahesh Meniya

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

Es ist ein wirklich einfaches "SyntaxHighlighter for Blogger" -Tutorial mit Screenshots und allem.

Sie sollten in nur wenigen Minuten einsatzbereit sein.

Das Tutorial basiert auf der "neuen Benutzeroberfläche", auf die Sie sich beziehen.

Hoffe das hilft. Fröhliches Codieren.

22
John Erck

Abhängig von Ihrer Vorlage wird der SyntaxHighlighter-JavaScript-Code möglicherweise ausgeführt, bevor der Inhalt geladen wurde. In diesem Fall sollte das Problem behoben werden, indem der Code so geändert wird, dass er nach einer kurzen Zeitüberschreitung ausgeführt wird. Versuchen Sie dies im <head> Ihrer HTML-Vorlage:

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

Sie können weitere Anpassungen der Standardeinstellungen vornehmen, bevor Sie ScriptHighlighter.all() aufrufen.

Wenn Sie das Erscheinungsbild der SyntaxHighlighter-Codeanzeige anpassen möchten, fügen Sie CSS wie das folgende hinzu:

.syntaxhighlighter code {
 Schriftfamilie: Consolas! important; 
 Schriftgröße: 10px! important; 
}

Das !important Ist erforderlich, um die SyntaxHighlighter-Themendefinitionen zu überschreiben.

0
grkvlt