Comment configurer un surligneur syntaxique sur la nouvelle interface de Blogger ? J'ai essayé avec de nombreuses options mais rien n'a fonctionné. Veuillez me faire part de vos suggestions.
Merci @Mahesh :) Vous avez fait le travail pour moi.
Réponses
Trop de publicités?
Mahesh Meniya
Points
1357
1. Tout d'abord, faites une sauvegarde de votre modèle de blogger
2. Après cela, ouvrez votre template blogger (en mode Edit HTML) et copiez les css. indiqué dans ce lien avant </b:skin> étiquette
3. Collez le code suivant avant </head> étiquette
<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 </body> étiquette.
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>5. Sauvegarder le modèle Blogger.
6. Maintenant que la coloration syntaxique est prête à être utilisée, 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 aquí .
8. Ici est la liste des langues supportées pour <class> attribut.
Suppression de certains .js comme "<script src='". syntaxhighlighter.googlecode.com/svn/trunk/Scripts/ Type='text/javascript'></script" accélère considérablement le temps de chargement des pages.
John Erck
Points
1614
Checkout http://oneqonea.blogspot.com/2012/04/how-do-i-add-syntax-highlighting-to-my.html
Il s'agit d'un tutoriel "SyntaxHighlighter for Blogger" très simple, avec des captures d'écran et tout le reste.
Vous devriez être opérationnel en quelques minutes seulement.
De plus, le tutoriel est construit autour de la "nouvelle interface" à laquelle vous faites référence.
J'espère que cela vous aidera. Bon codage.
Ce lien est génial. Je l'ai utilisé pour incorporer la mise en évidence du code dans mon site Web. Blog sur le développement de logiciels . La seule chose dont vous devez être conscient est que le code en surbrillance n'apparaîtra qu'après la publication de l'article. Si vous ne faites que le prévisualiser, le code ne sera pas mis en évidence. Ce comportement m'a un peu perturbé au début.
J'ai eu des problèmes, et celui-là a marché pour moi. J'aurais juste aimé qu'il y ait un guide pour l'utilisation de l'autoloader.
grkvlt
Points
1067
En fonction de votre modèle, le code JavaScript de SyntaxHighlighter peut s'exécuter avant que le contenu ne soit chargé. Dans ce cas, modifier le code pour qu'il s'exécute après un court délai d'attente devrait résoudre le problème. Essayez ceci dans le fichier <head> de votre modèle HTML :
<script type="text/javascript">
window.setTimeout(function() {
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
}, 10);
</script>Vous pouvez ajouter une personnalisation supplémentaire des valeurs par défaut avant l'appel à ScriptHighlighter.all() .
Si vous souhaitez personnaliser l'aspect et la convivialité de l'affichage du code de l'allumeur de syntaxe, ajoutez quelques feuilles de style CSS comme ceci :
.syntaxhighlighter code {
font-family: Consolas !important;
font-size: 10px !important;
}El !important est nécessaire pour remplacer les définitions du thème SyntaxHighlighter.
12 votes
Pourquoi fermer la question ? Si la question est vague, elle peut être modifiée. Les réponses sont bonnes, et ont aidé à résoudre le problème qui est posé. Peut-être faut-il déplacer cette question sur webapps.stackexchange.com ?
4 votes
Raison proche absolument stupide et auto-contradictoire, très normale pour l'OS. Pour la coloration syntaxique dans blogger, utilisez l'intégration du code gist de github, de la même manière que vous postez sur youtube et intégrez les vidéos.
0 votes
Je pense que son guide est disponible sur leur propre site D'ailleurs, vous devriez regarder le localisateur de contenu social pour blogger ici stackoverflow.com/questions/27619171/
1 votes
Vous pouvez utiliser gist.github.com pour cela, mettre votre code dans un blog n'est pas toujours une bonne idée si vous ne pouvez pas le mettre à jour ;)
0 votes
@VinodSrivastav Idée utile.
0 votes
@VINOTHENERGETIC vous pouvez le voir fonctionner ici. stackoverflow.com/questions/10560435/
0 votes
@VinodSrivastav si elle est SEO friendly
0 votes
@VINOTHENERGETIC vous pouvez créer un gist secret ou public.
0 votes
@VinodSrivastav Je pense que nous ne pouvons pas créer un gist secret et faire un lien vers le blogger et comment dites-vous que ce sera SEO friendly quand je crée un gist comme gist public ?
0 votes
@VINOTHENERGETIC Essayez juste une fois, le secret gist n'apparaîtra pas dans les résultats de recherche et ce que vous entendez par SEO friendly en fait ?
0 votes
Je voudrais donner une réponse actualisée (nouvelle) mais je ne peux pas... J'avais l'habitude d'utiliser l'ancien SyntaxHighlighter, mais ils l'ont rendu beaucoup plus compliqué à utiliser et à inclure tous les fichiers maintenant... J'ai trouvé highlightjs.org github.com/highlightjs/highlight.js highlightjs.readthedocs.io/fr/latest/index.html qui fonctionne encore mieux ! Il supporte des tas de langues et de styles/thèmes et est facile à utiliser. Vous mettez votre code dans, par exemple
<pre><code class="js"></code></pre>blocs. Voir son Github pour les thèmes et les langues à utiliser dans le code ci-dessous.0 votes
Avant
</head>(J'ai utilisé le thème VS2015, vous pouvez choisir le vôtre) :<link rel="stylesheet" href="http://stackoverflow.com//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.15.10/build/styles/vs2015.min.css"/><script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.15.10/build/highlight.min.js"></script>Avant</body>:<script type="text/javascript"> hljs.configure({}); //Can configure it here. hljs.initHighlightingOnLoad(); </script>Peut-être que cela aidera quelqu'un... Cela fonctionne sans problème et se charge très rapidement pour moi dans Blogger.0 votes
Réouverture du vote. C'est une bonne question qui a aidé beaucoup de gens, dont moi. Les changements se succèdent et il est important que les questions soient ouvertes pour intégrer de nouvelles réponses. Merci.