Mise en forme d'extraits de code pour la création de blogs sur Blogger
Mon blog est hébergé sur Blogger et je poste souvent des extraits de code dans C/C#/Java/XML etc., mais je trouve que l'extrait est "mutilé".
Existe-t-il des sites Web que je pourrais utiliser pour analyser l'extrait au préalable et trier le formatage, convertir XML "<" en "<", etc.
Il y a un certain nombre de questions autour de cette zone le SO, mais je n’en ai trouvé aucune qui réponde directement à cette question.
Edit: Pour @ Rich réponse, états du site "Pour afficher le code formaté sur votre site, vous devez vous procurer cette feuille de style CSS et ajouter une référence. dans la section <head> de votre page ". C'est le problème - vous ne pouvez pas faire cela sur Blogger d'après ce que je sais.
J'ai créé une entrée d'article de blog qui explique comment ajouter une mise en surbrillance de la syntaxe du code à un blogueur à l'aide de syntaxhighlighter 2.0
Voici mon blog:
http://www.craftyfella.com/2010/01/syntax-highlighting-with-blogger-engine.html
J'espère que cela vous aide les gars .. Je suis assez impressionné par ce qu'il peut faire.
Le moyen le plus simple de partager du code est avec un Gist public. Il suffit d’en écrire un et de le coller dans le code intégré. Peasy facile.
Pour résoudre le problème des moteurs de recherche, vous pouvez utiliser la fonction div masquée de la page, aussi simple que:
<div style="display:none"> content </div>
Pour mon blog, j'utilise http://hilite.me/ pour formater le code source. Il supporte beaucoup de formats et génère du HTML plutôt propre. Mais si vous avez beaucoup d'extraits de code, vous devez faire beaucoup de copier/coller. Pour le formatage Python code, j'ai également utilisé Pygments ( article de blog ).
Ce script css pourrait être utile à tous - Ce n'est pas pour la coloration syntaxique mais fonctionne bien pour présenter le code source au format original:
<pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace;
color: #000000; background-color: #eee;
font-size: 12px; border: 1px dashed #999999;
line-height: 14px; padding: 5px;
overflow: auto; width: 100%">
<code style="color:#000000;Word-wrap:normal;">
<<<<<<<YOUR CODE HERE>>>>>>>
</code>
</pre>
Comment utiliser:
- Collez cet extrait dans un éditeur de texte,
- collez votre code dans le bloc <<<<<< >>>>>>.
- Copier tout et
- coller en vue HTML dans l'éditeur de publication de blogger (ou de tout autre).
AVANTAGES: Simple et facile à utiliser, moins de configuration, facile à reconfigurer, pas de logiciel supplémentaire
Cela peut être fait assez facilement avec SyntaxHighlighter. J'ai instructions pas à pas pour la configuration de SyntaxHighlighter dans Blogger sur mon blog. SyntaxHighlighter est très facile à utiliser. Il vous permet de poster des extraits sous forme brute, puis de les envelopper dans des blocs pre comme:
<pre name="code" class="brush: erlang"><![CDATA[
-module(trim).
-export([string_strip_right/1, reverse_tl_reverse/1, bench/0]).
bench() -> [nbench(N) || N <- [1,1000,1000000]].
nbench(N) -> {N, bench(["a" || _ <- lists:seq(1,N)])}.
bench(String) ->
{{string_strip_right,
lists:sum([
element(1, timer:tc(trim, string_strip_right, [String]))
|| _ <- lists:seq(1,1000)])},
{reverse_tl_reverse,
lists:sum([
element(1, timer:tc(trim, reverse_tl_reverse, [String]))
|| _ <- lists:seq(1,1000)])}}.
string_strip_right(String) -> string:strip(String, right, $\n).
reverse_tl_reverse(String) ->
lists:reverse(tl(lists:reverse(String))).
]]></pre>
Il suffit de changer le nom du pinceau en "python", "Java" ou "javascript" et de coller le code de votre choix. Le balisage CDATA vous permet d'insérer à peu près n'importe quel code, sans vous soucier des fuites d'entités ni d'autres inconvénients typiques du blogging de code.
1. Tout d'abord, sauvegardez votre modèle de blogueur
2. Après cela, ouvrez votre modèle de blogueur (en mode Éditer HTML) et copiez la balise all css indiquée dans ce lien avant la balise </b:skin>
3. Collez le code suivant avant la balise </head>
<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. Collez le code suivant avant la balise </body>.
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>
5. Enregistrer le modèle Blogger.
6. La coloration syntaxique est maintenant prête à être utilisée. Vous pouvez l’utiliser avec la balise <pre></pre>.
<pre name="code">
...Your html-escaped code goes here...
</pre>
<pre name="code" class="php">
echo "I like PHP";
</pre>
sept. Vous pouvez échapper à votre code ici .
8. Ici est la liste des langues supportées pour <class> attribut.
http://formatmysourcecode.blogspot.co.uk/ fonctionne bien, vous devez simplement copier, formater, coller en arrière.
Voici n site qui formatera votre code et crachera du code HTML. Il inclut même des styles en ligne pour la coloration de la syntaxe. Peut ne pas fonctionner pour tous de vos besoins, mais c'est un bon début. Je crois qu'il a rendu la source disponible si vous souhaitez l'étendre:
J'ai créé un outil qui fait le travail. Vous pouvez le trouver sur mon blog:
Colorateur de code C # gratuit en ligne
En plus de coloriser votre code C #, l'outil prend également en charge tous les symboles <et> qui les convertissent en "lt;" et 'ampgt;' Les onglets sont convertis en espaces afin de donner la même apparence dans différents navigateurs. Vous pouvez même adapter le coloriseur aux styles CSS, au cas où vous ne pourriez ou ne voudriez pas insérer une feuille de style CSS dans votre blog ou votre site Web.
J'utilise une solution de technologie relativement basse. Je formate le code en utilisant cet outil mise en évidence de la syntaxe en ligne puis collez-le simplement dans le blog
Il semble y avoir eu quelques changements avec SyntaxHighlighter 2. qui facilitent son utilisation avec Blogger.
Il y a versions hébergées des styles et des javascripts sur: http://alexgorbatchev.com/pub/sh/
J'utilise SyntaxHighlighter avec mon blog Blogger. Le site actuel est hébergé sur mon propre serveur plutôt que sur celui de Blogger (Blogger propose une option de publication de messages sur votre propre site), mais le fait d’avoir votre propre domaine et hébergement Web ne coûte que quelques dollars par mois.
En fait, j'avais utilisé (quoi d'autre ;-)) Vim pour cela: il a un "plugin" 2html. Voir la documentation ici .
Ainsi, lorsque je modifie mon code, je le convertis simplement en HTML et collez les résultats dans l'éditeur HTML de Blogger.
Note: ce n'est pas si beau HTML (css intégré serait mieux), mais ça marche.
Oh: et il a des fichiers de syntaxe pour plusieurs langues, ce qui le rend très utile.
Réponse spécifique à Emacs: En ce qui concerne blogger, il autorise les CSS en ligne. Le problème avec les surligneurs basés sur javascript est que vous devez vivre avec leur jeu de couleurs ou mettre en œuvre votre propre. Mais, comme moi, si vous êtes fan de votre propre jeu de couleurs emacs, vous avez une bien meilleure option disponible. J'ai piraté le paquet "htmlize.el" pour emacs afin d'ajouter les quatre fonctions suivantes ...
- blog-htmlize-buffer
- blog-htmlize-region
- blog-htmlize-buffer-with-linum
- blog-htmlize-region-with-linum
Ces fonctions produiront du code HTML prêt à copier-coller (style inline) dans un nouveau tampon dans emacs, que vous pourrez directement utiliser dans votre blog. La sortie a exactement la même apparence que celle du code dans emacs (y compris le jeu de couleurs).
Voici un lien vers mon blog , où vous pouvez trouver des informations détaillées sur l'utilisation du "blog-htmlize.el" avec emacs. Cela supprime également le codage HTML des signes "inférieur à" et "supérieur à". Et comme emacs s'occupe de la mise en évidence et du style, vous n'avez pas à vous soucier de savoir si la bibliothèque js prend en charge la langue de vos extraits, ni à vous mêler de votre code de modèle dans Blogger.
Vous pouvez trouver le fichier elisp ici (enregistrer le fichier sous le nom blog-htmlize.el )
Pour publier vos fichiers HTML, javascript, c # et Java, vous devez convertir les caractères spéciaux en code HTML. comme '<' comme < et '>' vers > et e.t.c ..
Ajoutez ce lien Convertisseur de code à iGoogle. Cela vous aidera à convertir les caractères spéciaux.
Ajoutez ensuite SyntaxHighlighter 3.0.8 nouvelle version pour personnaliser votre code dans Blogger. Mais vous devez savoir comment configurer le syntaxHighlighter dans votre modèle de blogueur.
J'ai roulé le mien en fa # (voir this question), mais ce n'est toujours pas parfait (je ne fais que des expressions rationnelles, donc je ne reconnais pas les noms de classes ou de méthodes, etc.).
Fondamentalement, d'après ce que je peux dire, l'éditeur de blogueur mangera parfois vos chevrons si vous basculez entre le mode Compose et le mode HTML. Il faut donc coller en mode HTML puis sauvegarder directement. (Je peux me tromper à ce sujet, je viens d'essayer maintenant et cela semble fonctionner - dépend du navigateur?)
C'est horrible quand vous avez des génériques!