comment afficher l'extrait de code dans les blogs

J'ai un petit blog sur blogger.com et j'utilise un simple modèle gratuit que j'ai trouvé là-bas. Occasionnellement, je publie des extraits de code à propos de mes résultats. Le code est formaté d'une manière plutôt laide. Je vois là-bas que certains blogueurs ont un modèle de fantaisie pour montrer le code. Où puis-je trouver un tel modèle pour blogger?comment afficher l'extrait de code dans les blogs

Ou que puis-je faire pour atteindre la même chose?

Merci, mE

Source

2010-07-08 amok

Que diriez-vous d'un lien vers un tel blog avec des extraits de code de fantaisie? –

duplicata possible de [Comment puis-je afficher le code mieux sur mon blog blogger?] (Http://stackoverflow.com/questions/1644201/how-can-i-display-code-better-on-my-blogger-blog) – paulmorriss

J'ai le même problème mais je l'ai résolu en regardant ce tutoriel. –

Je dois insérer régulièrement des extraits de code dans blogposts. Le moyen le plus simple que j'ai trouvé est de conserver un fichier de démarques sur github, puis de copier les extraits de code sur le blog. Il vient avec la coloration syntaxique complète dans la langue de votre choix. Et pas de plugins et intuitif, facile à utiliser.

Par exemple, si vous écrivez à Ruby, Tout ce que vous devez faire est d'écrire ce

```ruby 
    [Your ruby code goes here] 
```

À titre d'exemple, voici un billet de blog J'ai récemment publié avec coloration syntaxique http://blog.iron.io/2013/09/ironcast-1-introduction-to-ironworker.html

Et voici le fichier de démarques correspondant aux articles du blog. https://github.com/iron-io/ironcasts-series-1/blob/master/Code-Snippets.md

PS: si vous voulez un moyen plus rapide pour modifier votre démarquage, je voudrais aussi suggérer http://dillinger.io/ pour le montage rapide

Source

2013-09-11 01:10:58 samol

Pouvez-vous élaborer sur la partie "copier le fragment de code sur le blog" en détail? – Suhas

@Suhas, donc fondamentalement mettre en évidence l'extrait de code dans votre sens, puis copiez et collez cela dans blogspot. Cela fonctionne parce que la copie copie aussi tout le HTML (qui contient la surbrillance) et quand le HTML est collé dans blogspot, il sera rendu. – samol

page non disponible – programtreasures

Vous pouvez utiliser SyntaxHighlighter, l'auteur a fourni une version hébergée il vous suffit d'aller à votre modèle de blog, choisissez l'option Modifier HTML et ajoutez le code suivant au début de la page

<link href='http://alexgorbatchev.com/pub/sh/2.0.320/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/2.0.320/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shCore.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJScript.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPowerShell.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushDiff.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCpp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCSharp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushBash.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPlain.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushXml.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushSql.js' type='text/javascript'/> 
<script type='text/javascript'> 
    SyntaxHighlighter.all(); 
</script>

vous pouvez voir l'exemple sur my blog

Source

2010-07-08 20:38:30 oscarkuo

Juste pour référence, cette syntaxe est mise en évidence d'une manière laide. Juste en soulignant l'ironie dans un post sur la façon de réparer de telles choses. :) – cHao

Habituellement, il y a des plugins pour réaliser ce que vous cherchez (Wordpress a des tonnes et des tonnes), mais je ne suis pas sûr de Blogger.

Vous pouvez probablement utiliser Javascript pour faire la même chose; voici un exemple: http://www.halhelms.com/blog/index.cfm/2008/12/11/Code-Formatting-in-Blog-Pages-with-jQuery

Ou ceci: http://www.craftyfella.com/2010/01/syntax-highlighting-with-blogger-engine.html

Source

2010-07-08 20:38:53 amfeng

je luttais essayer d'obtenir SyntaxHighlighter de travailler pendant une longue période (Chrome et Blogger produits divs horribles de défilement).

Je me suis enfin installé sur Google Code Prettify. Il semble plus simple que SyntaxHighlighter, mais fonctionne très bien.

Tout ce que vous devez savoir se trouve dans le README

Chargez le script dans la section <head> du modèle de blogueur:

<script language='javascript' type='text/javascript' 
    src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' /> 
<script language='javascript' type='text/javascript' 
    src='http://google-code-prettify.googlecode.com/svn/trunk/src/lang-css.js'/> 

<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(prettyPrint); 
</script>

Le format en utilisant <pre class="prettyprint"> ou <pre class="prettyprint lang-yaml">' ou en ligne avec <code class="prettyprint">.

Oh, il prend en charge plusieurs langues et themes.

Source

2011-10-28 23:00:05 TrophyGeek

Vous pouvez également intégrer des fichiers à partir Bitbucket ou Gists de Github:

Comment:

Bitbucket (uniquement pour les vues non dynamiques)

Créer un compte Bitbucket si vous n'en ai pas
Créer un dépôt et appuyer sur votre code
Ouvrir un de vos fichiers sources comme this one et cliquez sur Intégrer.
Copiez le javascript à votre message.

Gist (Pour les vues non dynamiques.Voir ci-dessous pour les vues dynamiques)

Créez un compte Github si vous n'en possédez pas.
Passez à Gist et passez votre code dans un sens.
Créez un GIST comme ceci one et cliquez sur Intégrer.
Copiez le javascript dans votre post

Contenu essentiel pour Blogger Dynamic Views

Voir Moski's tutorial

Source

2013-06-15 01:56:12 IsKernel

Merci beaucoup :) –

La plupart des utilisateurs de Blogger utilisent blockquote pour montrer les codes. Ce qui est une très mauvaise approche. Les blockquotes sont destinés à montrer des exerts de différentes pages Web qui, lorsqu'elles sont utilisées pour les codes, les mettent en forme avec un style laid. Utilisez les balises <pre> and <code> pour afficher vos codes. Le navigateur affichera alors vos codes comme ils sont destinés à. Voici le format -

<pre> 
<code> 
your code goes here 
</code> 
</pre>

En savoir plus sur pourquoi l'utilisation de ces tags pour le blogueur - http://www.howtokickblogger.com/2013/06/blockquote-code-or-pre-tag-for-blogger.html

Source

2013-08-11 19:51:25

J'utilise le SyntaxHighlighter 3+ de la bibliothèque javascript. J'ai écrit un post simple pour blogger qui est une configuration plus optimisée.

http://modelarchitecture.blogspot.com/2013/12/configuring-javascript-syntaxhighligher.html

Source

2013-12-25 10:46:54

J'ai mis en place un outil qui peut formater votre code et l'afficher dans blogger. Essayez-le ici http://www.dukaweb.net/p/format-source-code.html.

L'idée utilise étiquette <pre><code> et compter le nombre de lignes en utilisant javascript

Source

2014-01-06 09:01:52

Vous pouvez utiliser Google Code-Prettify qui est le module JavaScript et le fichier css. Cela peut vous aider à mettre en évidence la syntaxe de vos extraits de code. De nombreux grands noms de la sphère Web utilisent Google-Code-Prettify pour activer la mise en évidence de la syntaxe dans leurs sites Web, par ex. code.google.com et même stackoverflow.com. Voici un method for installing and using Google-Code-Prettify in Blogger.

Source

2014-02-16 13:20:20

comment afficher l'extrait de code dans les blogs

Répondre

Questions connexes