Pages

mercredi 5 février 2014

Blogger : insérer une coloration syntaxique pour le code SQL

Afin d'améliorer la mise en page du code SQL nous allons utiliser SyntaxHighlighter  de Alex Gorbatchev.
Il faut insérer dans le modèle du blog le code ci-dessous :
<!-- SyntaxHighlighter-->

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>



<script language='javascript' type='text/javascript'>

SyntaxHighlighter.config.bloggerMode = true;

SyntaxHighlighter.all();

</script>

<!-- SyntaxHighlighter-->

Pour cela dans la page "Mes Blogs" cliquer sur "Modèle" puis sur "Modifier le code HTML" :


Au-dessus de la balise "</Head>" ajouter le code :


Il existe différent style css, le style par défaut est : shThemeDefault.css. Vous pouvez le remplacer par un des thèmes ci-dessous :


Pour utiliser SyntaxHighlighter il faut positionner ensuite dans son code HTML la syntaxe cidessous :

<pre class="brush: sql">
select sysdate from dual ;
</pre>

Exemple avec le thème par défaut :

select sysdate from dual ;

Aucun commentaire:

Enregistrer un commentaire