it-swarm.com.de

Wie verwende ich prettify mit Blogger/Blogspot?

Ich verwende blogger.com, um einige Texte zur Programmierung zu hosten, und ich möchte prettify (das gleiche wie stackoverflow) verwenden, um die Codebeispiele schön einzufärben.

Wie installiere ich die Prettify-Skripte in die Blog-Domain?
Wäre es besser (wenn es überhaupt möglich ist), irgendwo auf eine freigegebene Kopie zu verlinken?
Ich habe Webspace auf einer anderen Domain. Würde das helfen?

Danke vielmals.

56
billpg

Wenn Sie einen neuen Eintrag in Blogger erstellen, haben Sie die Möglichkeit, HTML in Ihrem Eintrag zu verwenden und Ihre Blogeinträge zu bearbeiten.

geben Sie also http://blogger.com ein, melden Sie sich an und dann Posten> Beiträge bearbeiten> Bearbeiten. Fügen Sie dies oben ein:

<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/lang-css.min.js"></script>
<script type="text/javascript">
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
addLoadEvent(function() {
    prettyPrint();
});
</script>
<style type="text/css">
/* Pretty printing styles. Used with prettify.js. */

.str { color: #080; }
.kwd { color: #008; }
.com { color: #800; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.tag { color: #008; }
.atn { color: #606; }
.atv { color: #080; }
.dec { color: #606; }
pre.prettyprint { padding: 2px; border: 1px solid #888; }

@media print {
  .str { color: #060; }
  .kwd { color: #006; font-weight: bold; }
  .com { color: #600; font-style: italic; }
  .typ { color: #404; font-weight: bold; }
  .lit { color: #044; }
  .pun { color: #440; }
  .pln { color: #000; }
  .tag { color: #006; font-weight: bold; }
  .atn { color: #404; }
  .atv { color: #060; }
}
</style>

Beachten Sie, dass Sie prettyPrintdirekt nicht als Ereignishandler verwenden sollten, da dies zu Verwirrung führt (siehe die Readme für Details). Deshalb übergeben wir addLoadEvent eine Funktion, die sich dann umdreht und prettyPrint aufruft.

In diesem Fall wird der Inhalt der Datei prettify.css nur eingebettet, da wir in Blogger keinen Link zum Stylesheet erstellen können.

fügen Sie dann einen <code></code>-Tag oder einen <pre></pre>-Tag mit dem Klassennamen "prettyprint" hinzu. Sie können sogar die Sprache wie diesen "prettyprint lang-html" angeben.

also kann es so aussehen

<pre class="prettyprint lang-html">
<!-- your code here-->
</pre>

oder so

<code class="prettyprint lang-html">
<!-- your code here-->
</code>

für den Code, den Sie eingeben, muss der HTML-Code von <und> entfernt werden. Fügen Sie dazu Ihren Code hier ein: http://www.simplebits.com/cgi-bin/simplecode.pl

sie können den Top-Code in Ihr HTML-Layout einfügen, sodass er standardmäßig für alle Seiten enthalten ist, wenn Sie möchten.

update Jetzt können Sie CSS-Dateien in Blogger verknüpfen. Das Hinzufügen zum <head> sollte also ausreichen

<link href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/lang-css.min.js"></script>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded',function() {
        prettyPrint();
    });
</script>

Ich habe mich dafür entschieden, das body onload-Ereignis nicht absichtlich zu ersetzen. Stattdessen verwende ich das neue DOMContentLoaded-Ereignis, das von den alten Browsern nicht unterstützt wird. Wenn Sie Unterstützung für alte Browser benötigen, können Sie zum Beispiel jedes andere load-Ereignis verwenden, um prettyPrint zu initiieren jQuery:

jQuery(function($){
    prettyPrint();
});

oder der angeblich kleinste domready ever

und fertig :)

Bearbeiten:

wie Lim H in den Kommentaren erwähnt, müssen Sie für den Fall, dass Sie die dynamischen Blogger-Ansichten (Ajax-Vorlagen) verwenden, die hier beschriebene Methode verwenden, um benutzerdefiniertes Javascript zu binden: prettyPrint () wird nicht aufgerufen auf Seite laden

Update 2017-06-04

Verwenden Sie die Anleitung hier https://github.com/google/code-prettify

Grundsätzlich benutze einfach diese :)

<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js"></script>
<pre class="prettyprint"><code class="language-css">...</code></pre>
60
Timo Huovinen

Folgendes hat bei mir sofort funktioniert.

  • Gehen Sie zu Blogger> Layout> HTML bearbeiten
  • Kopieren Sie das folgende Snippet und fügen Sie es unmittelbar nach <head> in das Feld "Vorlage bearbeiten" ein:

ausschnitt:

<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' rel='stylesheet' type='text/css'/>
<script src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' type='text/javascript'></script>
  • Nach </head><body> durch <body onload='prettyPrint()'> ersetzen
  • Klicken Sie auf "SAVE TEMPLATE"
  • Gehe zu Blogger> Posting> New Post
  • Stellen Sie sicher, dass Sie den HTML-Code bearbeiten, indem Sie auf "HTML bearbeiten" klicken. Im leeren Feld versuchen:

<pre class="prettyprint">int foo=0; NSLog(@"%i", foo); </pre>

  • Wenn Sie jetzt auf "Vorschau" klicken, wird dieser Code nur in Schwarz angezeigt. Mach dir (noch) keine Sorgen.
  • Klicken Sie auf "PUBLISH POST" und dann auf "VIEW BLOG". Ihr Code sollte hübsch sein.
41
SK9

Heutzutage verfügt Google-Code-Prettify über ein Auto-Loader-Skript. Sie können JavaScript und CSS zum Verschönern über eine URL laden.

Fügen Sie das Skript zum Abschnitt <head> Ihrer Blogger-Vorlage hinzu, und alle Ihre Beiträge werden bearbeitet:

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

Weitere Informationen finden Sie hier: http://code.google.com/p/google-code-prettify/wiki/GettingStarted

15
Badaro

Es ist sehr einfach, Google Code Prettifier in Ihrem Blogger hinzuzufügen.

fügen Sie die unten stehende Javascript-Bibliothek direkt vor dem Tag in Ihren Blogger ein.

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

genau wie im Bild unten ...

enter image description here

Jetzt haben Sie Google Code Prettifier erfolgreich in Ihrem Blogger hinzugefügt.

Wenn Sie nun Code in Ihren Blogger-Beitrag einfügen möchten, fügen Sie Code (html, css, php usw.) hinzu und fügen Sie diesen Code zwischen .... Tags ein.

 <pre class="prettyprint">...</pre> 

oder

<code class="prettyprint">...</code>

Demo des Google Prettify auf Blogger

Weitere Informationen zum Hinzufügen dieses Google-Prettifiers zu Blogger finden Sie in dieser Dokumentation unter folgendem Link.

Wie man Syntax Highlighter für Blogger mit Google Prettify hinzufügt

6
muni

Schauen Sie sich SyntaxHightlighter unter http://alexgorbatchev.com/wiki/SyntaxHighlighter an. Auf dieser Site finden Sie auch Anweisungen zur Verwendung bei blogger.com. Die Site bietet eine gehostete Version der erforderlichen Skripte an Sie müssen keine Dateien selbst hosten.

3

Eine andere Lösung ist die Verwendung der Java-Skriptbibliothek syntaxhighlighter 2.0. Ich habe es in meinem Blog verwendet und es scheint ziemlich gut zu funktionieren.

Hier ist ein Beitrag dazu:

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

Prost.

2
CraftyFella

Keine direkte Antwort auf Ihre Frage, aber eine Überlegung wert GitHub . Sie können ein kostenloses Konto einrichten und die Syntax farbig gestalten "Gists" , die Sie auf Ihrer Webseite veröffentlichen und hosten können.

Der Nachteil ist, dass die Kopie auf der Website von Github gehostet wird und wenn das nicht funktioniert, dann auch für Sie.

1
Jeff Foster

cdnjs, die die Bibliothek " SyntaxHighlighter " bereitstellen

gehe zu blogger >> template >> edit template füge den folgenden Code kurz vor dem Ende des Tags body hinzu und speichere das Template.
Ich habe ein Beispiel für Python gegeben.
Sie können die anderen Sprachskriptdateien von cdnjs verknüpfen. Syntaxhervorhebungscode

<pre class="brush: py">
    print("hello world")
</pre>

für andere Sprachen gehen Sie und kopieren Sie das Skript: https://cdnjs.com/libraries/SyntaxHighlighter

 enter image description here

<!-- syntax highlighter-->
<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDefault.css' rel='stylesheet'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shAutoloader.min.js'/>
<!-- for python -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPython.min.js'/>
<!-- include other languages like javascript, php -->
<script language='javascript'> 
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all(); 
</script>
1

Gehen Sie zum Blogger-Theme-Bereich und klicken Sie auf HTML bearbeiten. Fügen Sie dann Google Prettify CDN zum head-Tag des HTML-Codes hinzu.

https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'/>

Fügen Sie dann unter diesem Skript ein Design für das Code-Snippet ein.

<!--Desert theme-->
<style type='text/css'>pre .atn,pre .kwd,pre .tag{font-weight:700}pre.prettyprint{display:block;background-color:#333}pre .nocode{background-color:none;color:#000}pre .str{color:#ffa0a0}pre .kwd{color:Khaki}pre .com{color:#87ceeb}pre .typ{color:#98fb98}pre .lit{color:#cd5c5c}pre .pln,pre .pun{color:#fff}pre .tag{color:Khaki}pre .atn{color:#bdb76b}pre .atv{color:#ffa0a0}pre .dec{color:#98fb98}ol.linenums{margin-top:0;margin-bottom:0;color:#AEAEAE}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}@media print{pre.prettyprint{background-color:none}code .str,pre .str{color:#060}code .kwd,pre .kwd{color:#006;font-weight:700}code .com,pre .com{color:#600;font-style:italic}code .typ,pre .typ{color:#404;font-weight:700}code .lit,pre .lit{color:#044}code .pun,pre .pun{color:#440}code .pln,pre .pln{color:#000}code .tag,pre .tag{color:#006;font-weight:700}code .atn,pre .atn{color:#404}code .atv,pre .atv{color:#060}}</style>

Weitere Themen finden Sie hier .. Themen vervollständigen

Wenn Sie einen Beitrag erstellen, ändern Sie den Bearbeitungsmodus von visual inHTMLund wechseln Sie zu der Stelle, an der Sie das Code-Snippet hinzufügen. Dann fügen Sie den Code wie folgt ein.

<pre class="prettyprint">
  <code class="language-html">
      <!-- your code snippet -->
  </code>
</pre>

Sie können den Code-Stil ändern, indem Sie relevante Sprachen auswählen: html, css, php, javascript ... Hier habe ich ein html code snippet verwendet.

0
user7090620

Hier ist die Lösung, die für mich funktioniert. Geben Sie den <head>...</head> des dynamischen Blogger-HTML-Codes ein:

<script>
$(window.blogger.ui()).on('viewitem', function (event, post, element) {
    prettyPrint();
});
</script>
0
Artru