Formatage code snippets pour bloguer sur Blogger [fermé]

la façon la plus facile de partager le code est avec un public gist. Il suffit d'en écrire un et de le coller dans le code d'intégration. Facile comme bonjour.

http://gist.github.com

pour répondre à la question du moteur de recherche, on peut utiliser caché div sur 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 de sorties html plutôt propres. Mais si vous avez beaucoup de fragments de code, alors vous avez à faire beaucoup de copier coller. Pour formater le code Python, j'ai aussi utilisé Pygments ( blog post ).

ce script css pourrait être utile à tous - il n'est pas pour la mise en évidence de la syntaxe mais fonctionne bien pour présenter le code source dans le 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:

1. coller cet extrait dans l'éditeur de texte,
2. coller votre code dans <<<<<<>>>>>> le bloc.
3. Copy all et
4. coller à la vue HTML dans blogger (ou tout autre) post éditeur.

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 étape par étape des instructions pour mettre en place SyntaxHighlighter dans le blogueur sur mon blog. SyntaxHighlighter est très facile à utiliser. Il vous permet de poster des extraits sous forme brute et ensuite les envelopper dans pre blocs 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 "ou" java "ou" javascript " et de coller dans le code de votre choix. Le tag de CDATA vous allez mettre pretty beaucoup n'importe quel code là-dedans sans se soucier de l'entité échapper ou d'autres nuisances typiques de code blogging.

1. tout d'abord, prendre une sauvegarde de votre modèle de blogueur

2. après cela ouvrez votre modèle de blogueur (en mode Edit HTML) et copiez le tout css donné dans ce lien avant </b:skin> étiquette

3. coller le code suivant avant </head> tag

<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. coller le suivant code avant l'étiquette </body> .

<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

5. Enregistrer Le Modèle Blogger.

6. maintenant la mise en évidence de la syntaxe est prête à l'emploi vous pouvez l'utiliser avec <pre></pre> étiquette.

<pre name="code">
...Your html-escaped code goes here...
</pre>

<pre name="code" class="php">
    echo "I like PHP";
</pre>

7. 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 juste copier, formater, coller en arrière.

Voici un site qui permet de formater votre code et de cracher le html, et il inclut même des styles en ligne de coloration de la syntaxe. Pourrait 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 voulez l'étendre:

j'utilise SyntaxHighlighter avec mon Blogueur alimenté blog. Le site réel est hébergé sur mon propre serveur plutôt que celui de Blogger (Blogger a une option de messages ftping sur votre propre site), mais avoir votre propre domaine et hébergement web ne coûte que quelques dollars par mois.

il semble qu'il ya eu quelques changements avec SyntaxHighlighter 2.0 qui le rendent plus facile à utiliser avec Blogger.

il y a versions hébergées des styles et Javascripts à: http://alexgorbatchev.com/pub/sh/

j'utilise une solution assez basse technologie. Je formate le code en utilisant ce syntaxe en ligne mettant en évidence outil puis il suffit de coller dans le blog

j'ai créé un outil qui fait le travail. Vous pouvez le trouver sur mon blog:

En Ligne Gratuit De Code C# Coloriseur

outre la colorisation de votre code C#, l'outil s'occupe également de tous les symboles '<' et '>' les convertissant en '<' et '&gt;'. Les onglets sont convertis en espaces afin d'avoir la même apparence dans différents navigateurs. Vous pouvez même faire le colorisateur en ligne les styles CSS, au cas où vous vous ne pouvez pas ou vous ne voulez pas insérer une feuille de style CSS dans votre blog ou site web.

en fait, j'ai utilisé (quoi d'autre ;-) ) Vim pour cela: il a un 2html"plugin". Voir les docs ici .

alors comme je modifie mon code, je le convertis en HTML et coller les résultats à L'éditeur HTML du blogueur.

Note: Ce N'est pas si beau HTML (embededed css serait mieux), mais ça fonctionne.

Oh: et il a des fichiers de syntaxe pour plusieurs langues ce qui le rend très utile.

Emacs réponse spécifique: en ce qui concerne le blogueur, il permet CSS en ligne. Le problème avec javascript basé sur les surligneurs est que vous devez vivre avec leur schéma de couleur ou mettre en œuvre votre propre. Mais, comme moi, si vous êtes un fan de votre propre emacs schéma de couleur, vous avez une bien meilleure option disponible. J'ai piraté le "htmlize.el" package pour emacs pour ajouter les quatre fonctions suivantes...

1. blog-htmlize-buffer
2. blog-htmlize-région
3. blog-htmlize-tampon-avec-linum
4. blog-htmlize-région-avec-linum

ces fonctions vont produire du html prêt à copier-coller (style inline) dans un nouveau tampon dans emacs, que vous pouvez utiliser directement dans votre blog. La sortie ressemble exactement comme vous verriez le code dans emacs (y compris le schéma de couleur).

voici un lien vers mon blog , où vous pouvez trouver des informations détaillées pour l'utilisation du "blog-htmlize.el " avec emacs. Cela supprime le codage html des signes" less than "et" greater than". Et comme emacs fait toute la mise en évidence et le style, vous n'avez pas à vous soucier de savoir si la bibliothèque js supporte la langue de vos extraits, ni à vous mêler de votre code modèle dans blogger.

vous pouvez trouver le fichier elisp ici (enregistrer le fichier en tant que blog-htmlize.el )

j'ai roulé le mien EN F# (voir cette" question ), mais il n'est toujours pas parfait (je fais juste des regexps, donc je ne reconnais pas les classes ou les noms de méthode, etc.).

en gros, de ce que je peux dire, l'éditeur de blogger mangera parfois vos crochets d'angle si vous passez entre le mode composition et HTML. Vous devez donc coller dans le mode HTML puis enregistrer directement. (J'ai peut-être tort sur ce, juste essayé maintenant et il semble fonctionner un navigateur à charge?)

c'est horrible quand on a des génériques!

pour afficher votre html, javascript,c# et java, vous devez convertir des caractères spéciaux en code HTML. comme '<' comme < et '>' à > et E. T. C..

ajouter ce lien convertisseur de Code à iGoogle. Cela vous aidera à convertir les caractères spéciaux.

puis Ajouter SyntaxHighlighter 3.0.83 nouvelle version pour personnaliser votre code dans blogger. Mais tu devrais savoir comment pour configurer le syntaxHighlighter dans votre modèle blogger.