Thème higlight d'éditeur de texte

Salut, autre tuto rapide !!

Vous avez un belle éditeur de texte comme celui ci bootstrap markdown et ça fonctionne bien jusqu'au jour ou dans votre forum ou article etc... vous voulez poster du <code> mais c'est pas beau le rendu n'est pas stylisé comme vous pouvez le voir sur github par exemple ou ici.

Et bien j'ai un truc pour vous !

Il existe prism celui que j'utilise, et higlight c'est les seuls que j'ai tester !

je vous explique comment fonctionne prism il est beaucoup mieux et on cherche toujours le mieux 😛

c'est simple vous importez les fichiers

<!DOCTYPE html>
<html>
<head>
	...
	<link href="themes/prism.css" rel="stylesheet" />
</head>
<body>
	...
	<script src="prism.js"></script>
</body>
</html>

Et là c'est pas fini, dans notre belle éditeur alors ça dépend des éditeur je pense, mais dans le miens vous faites comme ceci ```php votre code``` si c'est du css vous ```css votre code``` et vous envoyez le formulaire et la magie opère les balise code reçois une class css... il faut bien coller le flag au petit apostrophe et ensuite votre code.

ça c'est la base on pourrai le rendre automatique mais je suis une bille en javascript, faites moi un tuto pour modifier mon éditeur 😜 je veut bien les smiley celui-ci me rappel quelque chose j'avais mis le même + ou - sur github mais c'est pas top 🙈

Il y a des débutant qui se demande comment on fait, donc voilà 😎

Édite -

Petite édition qui va complété le tutoriel qui se trouve ici d'une question originale qui se trouve ici ou c'était sur grafikart je sais plus, tuto complétion parce qu'il vous manque la fameuse constante WEBROOT pour inclure vos fichier etc...

define('WWW_ROOT', dirname(dirname(__FILE__)));

$directory = basename(WWW_ROOT);
$url = explode($directory, $_SERVER['REQUEST_URI']);
if(count($url) == 1){
    define('WEBROOT', DIRECTORY_SEPARATOR);
}else{
    define('WEBROOT', $url[0] . $directory . DIRECTORY_SEPARATOR);
}

Pour avoir mon update en version POO

    /*************
    * chemin absolut
    **************/
    public static function webroot(){
        
        $path = dirname(dirname(__FILE__));

        $directory = basename($path);
        $url = explode($directory, $_SERVER['REQUEST_URI']);
        if(count($url) == 1){
            $absolute = '/';
        }else{
            $absolute = $url[0] . $directory .'/';
        }
        return $absolute;
    
    }

Je vous donnerez bien mon fichier parsing mais il est bien charger je vais néanmoins vous donnée des pistes ;

Vous allez donc créer une class Parsing par exemple, il faut ajouté a votre projet un parser markdown, ici j'utilise celui de erusev, pour la suite je suis dans un namespace App

On commence par inclure la librairie erusev parsdown

namespace App;

use Aidantwoods\SecureParsedown\SecureParsedown;

Ensuite la première chose sera d'initialisé htmlpurifier (faite votre require en fonction) je vous laisse les balises clean mais a vous de réglé purifier comme vous le souhaitez.

public function SetPurify(){

        require_once ('..'.DIRECTORY_SEPARATOR.'lib'.DIRECTORY_SEPARATOR.'htmlpurifier'.DIRECTORY_SEPARATOR.'library'.DIRECTORY_SEPARATOR.'HTMLPurifier.auto.php');

        $purifierConfig = \HTMLPurifier_Config::createDefault();
        $purifierConfig->set('Core.Encoding', 'UTF-8');
        $purifierConfig->set('HTML.Allowed', 'p, a[href|title], blockquote[cite],span[style|class], table[style], thead, tr, th[style], td[style], tbody, pre, code[class|style], hr, em, strong, ul, li, img[src|alt|class], br, ol, del, h1, h2, h3, h4, h5, h6');
        $Purifier = new \HTMLPurifier($purifierConfig);
        
        return $Purifier;
    }

et on continue avec l'objet qui va construire notre parsdown

    public function SetParse(){

        $parsedown = new \Parsedown();
        $parsedown->setSafeMode(true);

        return $parsedown;
    }

et a la fin on refait comme dans le premier tuto

    public function ParserEmoji($content){

        $content = $this->SetPurify()->purify($this->SetParse()->text($content));

        $emoji_replace = 
        [
            ':grinning:'//1
        ];
        
        //https://github.com/markdown-it/markdown-it-emoji/blob/master/lib/data/light.json
        $emoji = 
        [
            "<img class='twem' src=".WEBROOT."'inc/js/krajee-markdown-editor/img/72x72/1.png'>"
        ];

        $content = str_replace($emoji_replace,$emoji,$content);

        //on renvoie la réponse nétoyez parser et smylisez
        return $content;
    }

Je vous laisse quelque lien et vous souhaite un bon mal de crane !!

Parsedown Parsedownextra markdown-it twemoji editeur

Voir moins Voir plus

353 vues

10 juin 2022 à 2:15 (Édité)

Thème higlight d'éditeur de texte

3 commentaires