Formatage d'extraits de code pour les blogs sur Blogger [fermé]

283

Mon blog est hébergé sur Blogger et je publie fréquemment des extraits de code dans C/ C#/ Java/ XMLetc. mais je trouve que l'extrait est "mutilé".

Existe-t-il des sites Web que je pourrais utiliser pour analyser l'extrait de code à l'avance et trier le formatage, convertir XML " <" en " &lt;" etc.

Il y a un certain nombre de questions dans ce domaine sur SO, mais je n'ai trouvé aucune réponse à cette question directement.

Edit:Pour la réponse @Rich , le site indique "Pour afficher le code formaté sur votre site, vous devez obtenir cette feuille de style CSS et y ajouter une référence dans la <head>section de votre page" . Voilà le problème - vous ne pouvez pas le faire sur Blogger AFAIK.

formatting blogs blogger rbrayb
la source
3
Pour afficher le code formaté: Si vous utilisez Visual Studio, vous pouvez copier n'importe quel type de code html / css / javascript / c # etc sur blogger. Vous devez installer les outils électriques de productivité de Visual Studio: pour plus d'informations, lisez: coding-issues.blogspot.in/2013/10/…
Ranadheer Reddy
Essayez le plug-in Coller en tant que code Visual Studio pour Windows Live Writer pour l'éditeur hors ligne de Blogger. WYSIWYG! .
herohuyongtao
Vous manquez un casier de contenu social comme WordPress? maintenant, vous pouvez également l'ajouter dans blogger stackoverflow.com/questions/27619171/…
craig lerr
1
Vous pouvez utiliser ce site Web pour obtenir le code de mise en évidence des épinettes de code pour différentes langues. il vous donne du HTML, vous pouvez le poster sur votre blog hilite.me
Bhavikkumar
Vous pouvez copier le code dans intellij et coller dans votre blog. Cela fonctionne comme un charme pour moi dans mon blog - codetails.blogspot.com/2017/11/design-pattern-in-java.html
user3871494

Réponses:

253

J'ai créé une entrée de blog qui explique comment ajouter la coloration syntaxique du code au blogueur à l'aide de syntaxhighlighter 2.0

Voici mon article de 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.

CraftyFella
la source
2
Quelqu'un peut-il confirmer si cela fonctionne toujours? J'ai essayé de coller la balise de script juste avant la </head>section et j'ai également ajouté la balise pre autour de mon code. Aucun changement cependant.
arviman
2
J'y ai passé quelques heures et je n'arrive pas du tout à le faire fonctionner.
thepaulpage
1
Cela ne fonctionne pas très bien pour DYNAMIC view blogger, pouvez-vous fournir une alternative? voici mon blog avec une vue dynamique satindersinght.blogspot.in
Satinder singh
1
Il semble que le code que vous êtes censé copier et coller manque quelque chose en haut, en particulier une balise <script>.
John Little
1
La réponse de Samuel est bien meilleure. Je n'aime pas ajouter autant de javascripts sur mon blog juste pour une simple mise en évidence de la syntaxe. Surtout les pages qui n'ont pas de syntaxe à mettre en évidence sont une exagération.
divinedragon
126

Le moyen le plus simple de partager du code est avec un aperçu public. Il suffit d'en écrire un et de le coller dans le code d'intégration. Peasy facile.

http://gist.github.com

Pour résoudre le problème des moteurs de recherche, on peut utiliser caché divsur la page aussi simple que:

<div style="display:none"> content </div>
yodaisgreen
la source
mec, après l'avoir utilisé pendant 20 minutes, je ne vous remercierai jamais assez! La meilleure mise en forme, sans tracas, tout le code est au même endroit, les articles sont tout simplement magnifiques, l'édition d'un article est incroyablement facile car vous ne mélangez pas le code avec le reste de l'article et ne vous inquiétez jamais de le faire quelque chose de stupide et de perdre / mal formater tout code. Merci!
Elijah Saounkine
19
L'intégration est javascript, il y a de fortes chances qu'elle soit invisible pour la recherche. Cela le tue à peu près pour les articles de blog.
James Moore
6
J'utilise actuellement gists mais j'utiliserai probablement à nouveau SyntaxHighlighter. Non seulement les gist utilisent JavaScript (ce qui les rend également inaccessibles dans les lecteurs RSS), mais ils ralentissent également le chargement des pages car chaque gist est téléchargé en bloquant séquentiellement le rendu. Pas un bon choix.
Tomasz Nurkiewicz
Merci! Tu as fait ma journée. Je vais juste partager ce script pour ajouter de l'essentiel au blogueur: github.com/moski/gist-Blogger
daniel.sedlacek
1
Cette idée fonctionne vraiment bien! le résultat est juste ce dont j'ai besoin; code bien formaté ... mais je ne vais pas y aller. Je préfère que mon message soit complet en lui-même et en dehors. Avoir le code, qui fait partie de la publication, hébergé ailleurs et inclus via js, va juste à l'encontre de cela!
venu le
63

Pour mon blog, j'utilise http://hilite.me/ pour formater le code source. Il supporte de nombreux formats et sorties html plutôt propres. Mais si vous avez beaucoup d'extraits de code, vous devez faire beaucoup de copier-coller. Pour formater le code Python, j'ai également utilisé Pygments ( article de blog ).

Samuel
la source
Je l' habitude d'utiliser hilite.me , mais maintenant je préfère dillinger.io
GoYun.Info
Je préfère également cela à gist.github. Aucun javascript et style / css supplémentaire requis. Merci Monsieur.
Prabowo Murti
40

Ce script css peut être utile à tous - il n'est pas destiné à 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 :

  1. Collez cet extrait dans l'éditeur de texte,
  2. collez votre code dans le bloc <<<<<< >>>>>>.
  3. Copiez tout et
  4. coller dans la vue HTML dans l'éditeur de blogueur (ou tout autre).

AVANTAGES: Simple et facile à utiliser, moins de configuration, facile à reconfigurer, pas de logiciel supplémentaire

gtiwari333
la source
1
La réponse la plus simple et la plus nette à mon avis. Créez simplement un CSS interne et vous êtes prêt à partir.
Rishik Mani
fonctionne bien pour moi aussi. solution simple
Hasitha
15

Cela peut être fait assez facilement avec SyntaxHighlighter. J'ai des instructions pas à pas pour configurer SyntaxHighlighter dans Blogger sur mon blog. SyntaxHighlighter est très facile à utiliser. Il vous permet de publier des extraits sous forme brute, puis de les encapsuler dans des preblocs 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>

Changez simplement le nom du pinceau en "python" ou "java" ou "javascript" et collez le code de votre choix. Le marquage CDATA vous permet de mettre à peu près n'importe quel code là-dedans sans vous soucier de la fuite d'entité ou d'autres ennuis typiques du blogage de code.

Alain O'Dea
la source
1
Vos instructions ont mieux fonctionné pour moi que l'autre réponse principale. Au cas où quelqu'un se retrouverait à les chercher, voici la liste des pinceaux fournis et leurs alias.
Scott
13

1. Tout d'abord, faites une copie de sauvegarde de votre modèle de blogueur.
2. Ensuite, ouvrez votre modèle de blogueur (en mode Edit HTML) et copiez tous les css fournis dans ce lien avant la </b:skin>balise
3. Collez le code de suivi avant la </head>balise

<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 </body>balise.

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

5. Enregistrez le modèle Blogger.
6. Maintenant, la coloration syntaxique est prête à l'emploi, vous pouvez l'utiliser avec la <pre></pre>balise.

<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. Voici la liste des langues prises en charge pour l' <class>attribut.

Mahesh Meniya
la source
Un joli lien. Ce serait mieux s'il le formatait en couleur! +1
Gaʀʀʏ
@le_garry: merci, j'ai rencontré un problème lors du formatage de l'extrait de code, il n'est donc pas en couleur.
Mahesh Meniya
Voir la réponse de gissolved. Le meilleur surligneur que j'ai vu jusqu'à présent, et il colore.
Gaʀʀʏ
@le_garry Ohh, vous prenez sur la mise en évidence de la syntaxe dans Blogger Cela fonctionne parfaitement avec la couleur. Je me méprends sur ce que vous pensez de ma réponse. J'étais donc triste d'avoir rencontré des problèmes.
Mahesh Meniya
@MaheshMeniya j'ai suivi toutes les étapes que vous avez écrites pour la syntaxe syntaxhighlighter mais cela ne fonctionne pas, y a-t-il un supplément à penser à ce qui me manque?
AA.SC
9

http://formatmysourcecode.blogspot.co.uk/ fonctionne très bien, il vous suffit de copier, formater, coller.

Gob00st
la source
J'utilise ceci pour mon blog. Pour les gens qui aiment les couleurs, cela ne code pas cependant! Je l'aime simple et simple.
Aravind
5

J'utilise une solution assez basse technologie. Je formate le code à l'aide de cet outil de mise en évidence de la syntaxe en ligne , puis je le colle dans le blog

Phil Hale
la source
Yup - tohtml est la solution recommandée par le TechNet Wiki pour coller du code!
rbrayb
@Phil Hale Il n'y a pas de retrait dans cet outil
user2771655
C'est la meilleure solution que j'ai trouvée jusqu'à présent. Merci
Kinjal
5

Voici un site qui formatera votre code et crachera du HTML, et il inclut même des styles en ligne pour la coloration de la syntaxe. Peut ne pas fonctionner pour tous vos besoins, mais c'est un bon début. Je pense qu'il a mis la source à disposition si vous souhaitez la prolonger:

Riches
la source
Ça ne marche plus.
Ε Г И І И О
4

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

Coloriseur de code C # en ligne gratuit

Outre la colorisation de votre code C #, l'outil prend également en charge tous les symboles "<" et ">" les convertissant en "& lt;" et '& gt;'. Les tabulations sont converties en espaces afin de se ressembler dans différents navigateurs. Vous pouvez même rendre le coloriseur en ligne avec les styles CSS, au cas où vous ne pourriez pas ou ne voulez pas insérer une feuille de style CSS dans votre blog ou site Web.

Pavel Vladov
la source
3

J'utilise SyntaxHighlighter avec mon blog alimenté par Blogger. Le site réel est hébergé sur mon propre serveur plutôt que sur Blogger (Blogger a la possibilité de publier des publications sur votre propre site), mais avoir votre propre domaine et l'hébergement Web ne coûte que quelques dollars par mois.

Pete Kirkham
la source
D'accord - il existe un certain nombre d'options si j'héberge mon propre blog, mais il ne semble pas y avoir beaucoup de soutien lorsque le blog est réellement hébergé par Blogger.
rbrayb
2

En fait j'avais utilisé (quoi d'autre ;-)) Vim pour ça: il a un "plugin" 2html. Voir les documents ici .

Donc, lorsque je modifie mon code, je le convertis simplement en HTML et je colle les résultats dans l'éditeur HTML de Blogger.

Remarque: ce n'est pas si beau HTML (css intégré serait mieux), mais cela fonctionne juste.

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

Zsolt Botykai
la source
1

Réponse spécifique à Emacs: En ce qui concerne le blogueur, il autorise le CSS en ligne. Le problème avec les surligneurs basés sur javascript est que vous devez vivre avec leur jeu de couleurs ou implémenter le vôtre. 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 pour ajouter les quatre fonctions suivantes ...

  1. blog-htmlize-buffer
  2. blog-htmlize-region
  3. blog-htmlize-buffer-with-linum
  4. blog-htmlize-region-with-linum

Ces fonctions produiront du HTML prêt à copier-coller (style en ligne) dans un nouveau tampon dans emacs, que vous pouvez utiliser directement dans votre article de blog. La sortie est exactement la même que vous verriez le 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 la façon d'utiliser le "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 (enregistrez le fichier sous blog-htmlize.el )

Sujeet
la source
0

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

Fondamentalement, d'après ce que je peux dire, l'éditeur de blogueur mange parfois vos crochets si vous basculez entre le mode Composer et le mode HTML. Vous devez donc coller en mode HTML puis enregistrer directement. (Je peux me tromper à ce sujet, juste essayé maintenant et cela semble fonctionner - dépend du navigateur?)

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

Benjol
la source
0

Pour publier votre html, javascript, c # et java, vous devez convertir des caractères spéciaux en code HTML. comme au '<'fur &lt;et '>'à &gt;et etc.

Ajoutez ce lien Convertisseur de code à iGoogle. Cela vous aidera à convertir les caractères spéciaux.

Ajoutez ensuite la nouvelle version de SyntaxHighlighter 3.0.83 pour personnaliser votre code dans Blogger. Mais vous devez savoir comment configurer le syntaxHighlighter dans votre modèle de blogueur.

Mdhar9e
la source