J'utilise blogger.com pour héberger des textes sur la programmation, et j'aimerais utiliser prettify (comme avec stackoverflow) pour colorer correctement les exemples de code.
Comment installer les scripts prettify dans le domaine de blog?
Serait-il préférable (si c'est effectivement possible) de créer un lien vers une copie partagée quelque part?
J'ai un espace Web sur un domaine différent. Cela aiderait-il?
Merci beaucoup.
Lorsque vous effectuez une nouvelle entrée dans blogger, vous avez la possibilité d'utiliser du code HTML dans votre entrée et de modifier vos entrées de blog.
donc, de type http://blogger.com , puis connectez-vous, puis Affichage>Modifier les Messages>Modifier puis y mettre ceci en haut:
<script type="text/javascript" language="javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
<script type="text/javascript" language="javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/lang-css.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 prettyPrint directement comme un gestionnaire d'événement, qu'il confond (voir le fichier readme pour plus de détails). C'est pourquoi nous passons addLoadEvent une fonction qui puis se retourne et appelle prettyPrint.
Dans ce cas, parce que le blogueur ne nous permettent pas de lien vers la feuille de style, nous venons d'intégrer l'embellir.css contenu.
puis ajouter un <code></code> balise ou un <pre></pre> étiquette avec le nom de la classe d' "prettyprint", vous pouvez même spécifier la langue comme ça "prettyprint lang-html"
donc, il peut ressembler à ceci
<pre class="prettyprint lang-html">
<!-- your code here-->
</pre>
ou comme ceci
<code class="prettyprint lang-html">
<!-- your code here-->
</code>
le code que vous avez mis dans le besoin d'avoir sa HTML nettoyé de < et > pour ce faire, il suffit de coller votre code ici: http://www.simplebits.com/cgi-bin/simplecode.pl
vous pouvez mettre le haut de code dans votre page HTML, de sorte 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 ce point à l' <head> devrait être suffisant
<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
<script type="text/javascript" language="javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/lang-css.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded',function() {
prettyPrint();
});
</script>
J'ai choisi de ne pas remplacer le corps d'événement onload sur le but, au lieu de cela, je suis en utilisant la nouvelle de l'événement DOMContentLoaded que les vieux navigateurs qui ne supportent pas, si vous avez besoin d'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 plus petit domready jamais
et votre fait :)
La suite travaillé pour moi immédiatement.
<head> dans la partie "Modifier le modèle" champ: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>
</head> remplacer <body> avec <body onload='prettyPrint()'>
<pre class="prettyprint">int foo=0;
NSLog(@"%i", foo);
</pre>
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
Consultez SyntaxHightlighter à l' adresse http://alexgorbatchev.com/wiki/SyntaxHighlighter. Sur ce site, vous pouvez également trouver des instructions sur la façon de l'utiliser sur blogger.com. Ce site propose également une version hébergée des scripts requis. besoin d'héberger des fichiers quelque part vous-même.
Une autre solution est d'utiliser le syntaxhighlighter 2.0 java script bibliothèque. 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
Des acclamations.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
