Koodi kuvamine veebilehel

Igal õigel programmeerijal on oma kogu vajalikest koodijuppidest. Erinevad testid ja katsetused. 
Enamasti on need salvestatud kusagile projektidesse või niisama eraldi failidesse. 

Enamus vajalikud näidised koodist on muidugi juba suurest ja laiast veebist leitavad, aga kuna Google kipub aegajalt vähe rumal olema või ei soovi õiget vastust anda, siis oma kogu koodidest on väga kasulik. 

Järgnevalt on siin näide kuidas lisada ilusat ja loetavat koodi oma veebilehele. 

Toimib: Drupal 9 ja 10, PHP veebilehed. 

1. Drupal mooduli loomine (PHP veebilehele Drupali moodulit ei lisa). 

Esmalt tuleb luua Drupali kaustas oleva modules kausta kaust nimega syntax_highlighter. Muidugi võid siin kasutada oma valitud projekti nime ja ei pea kasutama syntax_highlighter. 

Järgnevalt tuleb luua fail nimega syntax_highlighter.info.yml

Fail nimega syntax_highlighter.info.yml sisaldab järgnevat sisu:

name: Syntax Highlighter
type: module
description: 'This Syntax Highlighter module description'
core_version_requirement: ^9 || ^10
package: 'my_package'
version: '1.0'
project: 'syntax_highlighter'
datestamp: 1594655497

Järgnevalt tuleb luua fail nimega syntax_highlighter.module

Fail nimega syntax_highlighter.module sisaldab järgnevat sisu:

function syntax_highlighter_node_view_alter(&$build, $node, $display){
    if(in_array($node->getType(),['article','page'])){
        preg_match_all('/<pre><code class="language-(\w+)">(.*(?!<\code))<\/code><\/pre>/siU',$build['body'][0]['#text'],$output_array);
        if($output_array){
            if(count($output_array[0])>0){
                include_once dirname(__FILE__).'/geshi/geshi.php';
                foreach($output_array[0] as $k=>$r){
                    $geshi = new GeSHi(html_entity_decode($output_array[2][$k]),$output_array[1][$k]);
                    $geshi->enable_line_numbers(GESHI_NORMAL_LINE_NUMBERS);
                    //$geshi->set_highlight_lines_extra_style($style);
                    $build['body'][0]['#text']=str_replace($output_array[0][$k],$geshi->parse_code(),$build['body'][0]['#text']);
                }
            }
        }
    }
}

Drupali mooduli loomisel viimase tegevusena tuleb luua syntax_highlighter kausta kaust nimega geshi 
 

2. Geshi projekti lisamine oma moodulile või niisama PHP veebilehele. 

Kuna kasutame koodi ilustamisel Geshi  projekti, siis tuleb antud projektilt alla laadida vajalikud PHP scriptid. 
Selleks tuleb külastada projekti aadressil 
https://github.com/GeSHi/geshi-1.0/tree/master/src 
ja sealt laadida alla fail geshi.php ja samas kõrval olev kaust nimega geshi. 
Alla laetud fail ja kaust tuleb asetada juba loodud kausta nimega geshi. 

Drupali kasutajad saavad nüüd selle loodud mooduli aktiveerida oma Drupali moodulite lehel. 
Koodi sisestamiseks veebilehel kasuta CKEditor 5 redaktorit ja seal olevat "code block" nuppu. 

Mitte Drupal põhjal PHP veebilehed

Lisa oma PHP faili järgnev koodijupp:

$html='<pre><code class="language-php">echo \'Hello World!\';</code></pre>';
preg_match_all('/<pre><code class="language-(\w+)">(.*(?!<\code))<\/code><\/pre>/siU',$html,$output_array);
        if($output_array){
            if(count($output_array[0])>0){
                include_once dirname(__FILE__).'/geshi/geshi.php';
                foreach($output_array[0] as $k=>$r){
                    $geshi = new GeSHi(html_entity_decode($output_array[2][$k]),$output_array[1][$k]);
                    $geshi->enable_line_numbers(GESHI_NORMAL_LINE_NUMBERS);
                    //$geshi->set_highlight_lines_extra_style($style);
                    $html=str_replace($output_array[0][$k],$geshi->parse_code(),$html);
                }
            }
}
echo $html;

Kujundus

Lisaks on võimalus nüüd koodi kujundada vastavalt oma soovidele. Selleks ava geshi/geshi kaustas olev soovitud programmikeele PHP fail ja muuda seal sees olevad värvid vastavalt oma soovile. 

Lisaks võiks juurde lisada ka oma üldises CSS stiilifailis järgnevad read:

pre{
    font-size: 1rem;
    padding: 0.25rem;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
    transition: all 200ms ease-out;
    border-radius: 3px;
}
pre:hover{
    box-shadow: 0 0 6px rgba(19, 196, 165, 1);
}