web-dev-qa-db-fra.com

Comment utiliser prettify avec blogger/blogspot?

J'utilise blogger.com pour héberger des textes sur la programmation, et j'aimerais utiliser prettify (comme avec stackoverflow) pour colorer les exemples de code.

Comment installer les scripts prettify dans le domaine de blog?
Serait-il préférable (si cela est possible) de créer un lien vers une copie partagée quelque part?
J'ai un espace Web dans un domaine différent. Cela aiderait-il?

Merci beaucoup.

javascriptshared-hostingbloggerblogspotprettify
56
billpg

Lorsque vous faites une nouvelle entrée dans Blogger, vous avez la possibilité d'utiliser HTML dans votre entrée et de modifier vos entrées de blog.

alors tapez http://blogger.com , puis connectez-vous, puis publiez> Modifier les messages> Modifier, puis mettez ceci en haut:

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

Notez que vous ne devriez pas utiliser prettyPrintdirectement comme gestionnaire d'événements, cela le confond (voir le fichier readme pour plus de détails). C’est pourquoi nous passons addLoadEvent une fonction qui se retourne et appelle prettyPrint.

Dans ce cas, parce que blogger ne nous permet pas de créer un lien vers la feuille de style, nous intégrons simplement le contenu de prettify.css.

puis ajoutez une balise <code></code> ou une balise <pre></pre> avec le nom de classe "prettyprint", vous pouvez même spécifier une langue comme celle-ci "prettyprint lang-html"

donc ça peut ressembler à ça

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

ou comme ça

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

le code que vous avez inséré a besoin que son code HTML soit nettoyé de <et> pour cela, collez simplement votre code ici: http://www.simplebits.com/cgi-bin/simplecode.pl

vous pouvez mettre le code en haut de votre mise en page HTML afin qu'il soit inclus par défaut pour toutes les pages si vous le souhaitez.

update Vous pouvez maintenant lier des fichiers CSS dans Blogger. Il est donc suffisant de les ajouter au <head>.

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

J'ai choisi de ne pas remplacer volontairement l'événement body onload. J'utilise plutôt le nouvel événement DOMContentLoaded que les anciens navigateurs ne prennent pas en charge. Si vous avez besoin de l'ancien navigateur, vous pouvez utiliser n'importe quel autre événement de chargement pour lancer prettyPrint, par exemple jQuery:

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

ou le soi-disant le plus petit domready jamais

et votre fait :)

Modifier:

comme Lim H indiqué dans les commentaires, si vous utilisez les vues dynamiques de blogger (modèles ajax), vous devez utiliser la méthode décrite ici pour lier un code javascript personnalisé: prettyPrint () n'est pas appelée sur le chargement de page

Mise à jour du 2017-06-04

Utilisez le guide ici https://github.com/google/code-prettify

Fondamentalement, utilisez ceci :)

<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

Ce qui suit a fonctionné pour moi immédiatement.

  • Accédez à Blogger> Mise en page> Modifier le code HTML
  • Copiez l'extrait suivant et collez-le immédiatement après <head> dans le champ "Modifier le modèle":

fragment:

<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>
  • Après </head>, remplacez <body> par <body onload='prettyPrint()'>
  • Cliquez sur "Enregistrer le modèle"
  • Aller à Blogger> Publication> Nouveau message
  • Assurez-vous de modifier le code HTML en cliquant sur "Modifier le code HTML". Dans le champ vide, essayez:

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

  • Remarquez que si vous cliquez sur "Aperçu", vous verrez maintenant ce code uniquement en noir. Ne vous inquiétez pas (encore).
  • Cliquez sur "PUBLISH POST" puis sur "VIEW BLOG". Votre code devrait être soigné.
41
SK9

De nos jours, Google-Code-Prettify a un script Auto-Loader. Vous pouvez charger les scripts JavaScript et CSS pour la validation via une seule URL.

Ajoutez le script à la section <head> de votre modèle Blogger et il fonctionnera pour tous vos messages:

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

Plus de détails ici: http://code.google.com/p/google-code-prettify/wiki/GettingStarted

15
Badaro

Il est très simple d’ajouter un agent de correction de code Google dans votre blogueur.

il suffit d'inclure la bibliothèque javascript ci-dessous dans votre blogueur juste avant la balise.

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

juste comme dans l'image ci-dessous ...

enter image description here

Vous venez maintenant d’ajouter avec succès le prettificateur de code Google à votre blogueur.

Maintenant, si vous voulez insérer du code dans votre article de blogueur, ajoutez du code (html, css, php, etc.), puis insérez ce code entre .... balises.

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

ou

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

Démo de Google Prettify sur Blogger

Veuillez également vous référer à cette documentation pour ajouter ce filtre Google à Blogger dans le lien suivant.

comment ajouter Syntax Highlighter à Blogger avec Google Prettify

6
muni

Consultez SyntaxHightlighter à l’adresse http://alexgorbatchev.com/wiki/SyntaxHighlighter sur ce site, vous trouverez également des instructions pour l’utiliser sur blogger.com. Ce site propose également une version hébergée des scripts requis. vous n'avez pas besoin d'héberger des fichiers quelque part vous-même.

3
Jeroen-bart Engelen

Une autre solution consiste à utiliser la bibliothèque de scripts Java syntaxhighlighter 2.0. Je l'ai utilisé sur mon blog et il semble fonctionner assez bien.

Voici un post à ce sujet:

http://www.craftyfella.com/2010/01/syntax-highlighting-with-blogger-engine.htmltexte du lien

À votre santé.

2
CraftyFella

Pas une réponse directe à votre question, mais mérite d'être examiné GitHub . Vous pouvez obtenir un compte gratuit et obtenir la syntaxe de couleur "gists" que vous pouvez partager et héberger sur votre page Web.

L'inconvénient est que la copie est hébergée sur le site de Github et que si c'est le cas, elle l'est aussi pour vous.

1
Jeff Foster

cdnjs fournissant la bibliothèque " SyntaxHighlighter "

eu à blogger >> modèle >> éditer modèle ajouter le code ci - dessous juste avant la fin du body tag et enregistrer le modèle.
J'ai donné l'exemple pour python.
vous pouvez lier les fichiers de script d’autres langues à partir de cdnjs. code de surbrillance de la syntaxe 

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

pour les autres langues, allez copier le script: 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
Anjaneyulu Batta

Allez dans la section thème de blogger et cliquez sur edit HTML .. Ajoutez ensuite Google Prettify CDN à la balise head du HTML.

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

Ensuite, incluez un thème pour l’extrait de code sous ce script. J’ai inclus le thème Desert.

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

Pour plus de thèmes, visitez ici .. Préciser les thèmes

Lorsque vous créez une publication, changez le mode d’édition de visual àHTMLet accédez à l’endroit où vous allez ajouter l’extrait de code. Ensuite, incluez le code comme ceci.

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

Vous pouvez changer le style de code en sélectionnant les langues pertinentes html, css, php, javascript ... Ici, j'ai utilisé un extrait html code.

0
user7090620

Ici est la solution qui fonctionne pour moi. Mettez dans le <head>...</head> du blogueur dynamique HTML:

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