Cipher Bliss

dimanche 8 novembre 2015

Mise en forme de code coloré sur votre site

assez souvent je croise des blogs contenant des portions de code malheureusement non mises en couleur selon le langage.

C'est pourtant pas si compliqué à mettre en place.
de nombreux plugins de blogs wordpress, drupal, dotclear le proposent, si vous écrivez sur un blog.
Ou bien il suffit d'inclure une lib JS (en fin de corps de page) qui se chargera de détecter vos balises <code></code> ou <pre></pre>, de deviner de quel langage il s'agit et de le colorer en conséquence. Sauf que le langage n'est pas toujours bien détecté car plusieurs langages utilisent des structures et des mots clés similaires,
il faut souvent utiliser un marquage pour éviter les colorations qui n'ont rien à voir.
pour dotclear, sur lequel fonctionne ce blog j'utilise YASH.
il faut mettre son code dans une balise de préformatage <pre></pre> et lui mettre une classe brush:js par example. Ce qui est un peu relou.
ce qui donne ceci dans le code HTML
<pre class="brush:html">
<!-- mon commentaire html --> <html> là on est dans du html moche mais coloré </html>
</pre>
Mais syntaxeHL fait aussi très bien l'affaire:
http://plugins.dotaddict.org/dc2/details/syntaxehl
// wow ce code est trop mieux en couleur
var bonjour = 'Hello Monde!';
Mais si vous voulez un joli thème de coloration y'a le projet HighLightJS qui non seulement met en forme plus de 50 lagages, mais dispose aussi d'un bon paquet de thèmes dans leur démos.
Le site propose aussi de créer un pack de la lib pour ne mettre en forme que certains langages choisis. Vu qu'en général on ne parle pas de quinze mille langages différents sur le même site c'est une option fort chouette.
J'ai donc uploadé le pack.js dans mon dossier public de dotclear ainsi que le thème css qui va bien.
j'ai ajouté l'appel au script dans le footer tpl/_footer.html de mon thème dotclear, 
<script src="/public/highlightjs/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<link rel="stylesheet" href="/public/highlightjs/agate.css">
le code d'exécution dans une autre balise script, chargé le css dans l'entête du fichier tpl/_head.html
Comme sur ce blog j'utilise la balise de code pour montrer du code, et que la mise en forme d'highlightjs s'applique à une balise<pre> (le bonheur est dedans) contenant la balise code, j'ai rajouté une ligne de jquery pour enlevopper mes balises codes d'un préformatage. 
$('.post-content code').wrap('pre')
ainsi je peux spécifier la classe du nom du langage sur ma balise code et elle est conservée.
c'est facile à mettre en place, et zoup! ça améliore l'expérience de lecture donc pourquoi s'en priver ? ;)
enjoy!

lundi 30 mars 2015

du PHP sexiste

à quoi ça peut bien ressembler du code sexiste? C'est possible, j'en ai fait un tuto pour la journée des droits des femmes 2015. Allez voir par ici sur le tykayn blog.

jeudi 25 juillet 2013

Redirection dotclear

Discouragement Redirection Cube

Si comme moi vous avez déménagé un blog Dotclear vers un nouveau serveur et que vous ne souhaitez pas perdre vos anciens liens, lecteurs et autres joies du référencement il convient de faire une redirection permanente de tous les liens envoyés à l'index.php de Dotclear.

éditez donc ce fichier et rajoutez y ce code avec vos infos perso.

<?php
function curPageURL() {
 $pageURL = 'http';
 if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
 $pageURL .= "://";
 if ($_SERVER["SERVER_PORT"] != "80") {
  $pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
 } else {
  $pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
 }
 return $pageURL;
}


$mystring = curPageURL();
$findme   = 'index.php/post';
$pos = strpos($mystring, $findme);

if( $pos ){  //pour remplacer la nouvelle façon d'écrire le chemin vers l'index et les posts
         // bien sûr au lieu de tykay.free.fr et tykayn.fr il faut mettre ce code en fonction de vos informations persos
	$newurl = str_replace('http://tykay.free.fr/index.php/post','http://tykayn.fr/?post',curPageURL());
}
else{
	$newurl = str_replace('http://tykay.free.fr','http://tykayn.fr',curPageURL());
}

//echo $newurl;
// Permanent redirection
header("HTTP/1.1 301 Moved Permanently");
header("Location: $newurl");
?>

Et voilou! Enjoy