Comment utiliser enjoliver avec Blogger / Blogspot?
https://stackoverflow.com/questions/1852537
-
13-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
J'utilise blogger.com pour accueillir des textes sur la programmation, et je voudrais utiliser enjoliver (comme StackOverflow) pour colorer bien les exemples de code.
Comment puis-je installer les scripts Prettify dans le domaine de blog?
Serait-il préférable (si en effet il est possible) pour relier une copie partagée quelque part?
Je webspace sur un autre domaine. Cela aiderait?
Merci.
La solution
Lorsque vous effectuez une nouvelle entrée dans le blogueur, vous avez la possibilité d'utiliser HTML dans votre entrée et de modifier vos entrées de blog.
http://blogger.com , connectez-vous ensuite, puis Affichage> Modifier les messages> Modifier puis y mettre ce 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 devez pas utiliser prettyPrint directement en tant que gestionnaire d'événements, il confond (voir readme pour plus de détails). Quelle est la raison pour laquelle nous transmettons addLoadEvent une fonction qui tourne alors autour et appelle prettyPrint.
Dans ce cas parce que le blogueur ne nous permet pas de lien vers la feuille de style, nous avons juste intégrer le contenu prettify.css.
puis ajoutez une balise <code></code> ou une étiquette de <pre></pre> avec le nom de la classe de "prettyprint", vous pouvez même spécifier la langue comme celui-ci "prettyprint lang-html"
il peut donc ressembler à ceci
<pre class="prettyprint lang-html">
<!-- your code here-->
</pre>
ou comme celui-ci
<code class="prettyprint lang-html">
<!-- your code here-->
</code>
le code que vous mettez dans doit avoir son code HTML nettoyé de
vous pouvez mettre le code en haut dans votre mise en page HTML afin que son inclus pour toutes les pages par défaut si vous le souhaitez.
mise à jour
Maintenant, vous pouvez lier des fichiers CSS dans Blogger,
afin d'ajouter ceci au <head> devrait être suffisant
<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 l'événement onload du corps sur le but, au lieu que je utilise le nouvel événement DOMContentLoaded que les anciens navigateurs ne supportent pas, si vous avez besoin ancien support du navigateur, vous pouvez utiliser tout autre événement de chargement pour initier prettyPrint , par exemple jQuery:
jQuery(function($){
prettyPrint();
});
ou soi-disant le plus petit domready jamais
et votre fait:)
Modifier
Lim H a souligné dans les commentaires, dans le cas où vous utilisez le blogueur des vues dynamiques (modèles ajax ) alors vous devez utiliser la méthode décrite ici pour lier javascript personnalisé: prettyPrint () ne soit pas appelé à la page charge
Mise à jour 2017-06-04
Utilisez le guide ici https://github.com/google/code-prettify
En fait il suffit d'utiliser 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>
Autres conseils
Les personnes suivantes ont travaillé pour moi immédiatement.
- Aller à Blogger> Mise en page> Modifier le code HTML
- Copiez le code suivant et collez-le immédiatement après
<head>dans le champ « Modifier le modèle »:
extrait:
<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>remplacer<body>avec<body onload='prettyPrint()'> - Cliquez sur "Enregistrer le modèle"
- Aller à Blogger> Affichage> Nouveau message
- Assurez-vous que vous modifiez le code HTML en cliquant sur « Modifier le code HTML. » Dans le essai de champ vide:
<pre class="prettyprint">int foo=0;
NSLog(@"%i", foo);
</pre>
- Avis si vous cliquez maintenant « Aperçu » vous verrez ce code en noir seulement. Ne vous inquiétez pas (encore).
- Cliquez sur "POST PUBLIER" et "BLOG VIEW". Votre code doit être enjolivé.
Aujourd'hui, Google Code-Prettify a un script automatique Loader. Vous pouvez charger le code JavaScript et CSS pour Prettify via une URL.
Ajoutez le script à la section <head> de votre modèle Blogger et il fonctionnera sur 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
Il est très simple d'ajouter du code google prettifier dans votre blogueur.
il suffit d'inclure le dans votre blogueur bibliothèque javascript ci-dessous juste avant balise.
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
comme dans l'image ci-dessous ...
Maintenant que vous avez ajouté avec succès le code Google prettifier dans votre blogueur.
Maintenant, si vous voulez insérer du code dans votre message de blogueur, puis ajouter 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
En outre s'il vous plaît consulter cette documentation pour l'ajout de ce Google prettifier à blogger dans le lien suivant.
comment ajouter la coloration syntaxique pour Blogger à l'aide de Google enjoliver
Jetez un oeil à SyntaxHightlighter http://alexgorbatchev.com/wiki/SyntaxHighlighter Sur ce site, vous pouvez également trouver des instructions sur la façon de l'utiliser à blogger.com et le site propose une version hébergée des scripts nécessaires afin que vous n'avez pas besoin d'héberger des fichiers quelque part vous-même.
Une autre solution consiste à utiliser le SyntaxHighlighter 2.0 bibliothèque de scripts java. Je l'ai utilisé sur mon blog et il semble fonctionner assez bien.
Voici un message à ce sujet:
http://www.craftyfella.com /2010/01/syntax-highlighting-with-blogger-engine.html lien texte
Vive.
Pas une réponse directe à votre question, mais vaut considérer GitHub . Vous pouvez obtenir un compte gratuit et la syntaxe colorée « logues » que vous pouvez partager et hôte sur votre page web .
L'inconvénient est que la copie est hébergé sur le site de Github et si c'est vers le bas, alors il est pour toi aussi.
cdnjs fournissant la bibliothèque " SyntaxHighlighter "
obtenu à blogueur >> modèle >> Modifier le modèle ajouter ci-dessous le code juste avant la fin de la balise body et enregistrez-modèle.
J'ai donné pour exemple python.
Comment vous pouvez lier les autres fichiers de script de langue de cdnjs.
syntaxe du code de surbrillance
<pre class="brush: py">
print("hello world")
</pre>
pour d'autres langues vont et copier le script: https://cdnjs.com/libraries/SyntaxHighlighter
<!-- 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>
Aller à blogger section thème et cliquez sur modifier HTML .. Ensuite, ajoutez Google Prettify CDN à l'étiquette de la tête du code HTML.
https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'/>
Ensuite, un thème comprennent pour l'extrait de code ci-dessous ce thème script..I inclus désert.
<!--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, rendez-vous ici .. thèmes Prettify
Lorsque vous créez un message, changer le mode d'édition du visuel à HTML et aller à l'endroit où vous allez ajouter l'extrait de code. Ensuite, inclure le code comme celui-ci.
<pre class="prettyprint">
<code class="language-html">
<!-- your code snippet -->
</code>
</pre>
Vous pouvez changer le style de code html en sélectionnant les langues pertinentes, css, php, javascript ... J'ai utilisé ici html extrait de code.
