Koodi kuvamine veebilehel

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:

  1. name: Syntax Highlighter
  2. type: module
  3. description: 'This Syntax Highlighter module description'
  4. core_version_requirement: ^9 || ^10
  5. package: 'my_package'
  6. version: '1.0'
  7. project: 'syntax_highlighter'
  8. datestamp: 1594655497

 

Järgnevalt tuleb luua fail nimega syntax_highlighter.module

Fail nimega syntax_highlighter.module sisaldab järgnevat sisu:

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

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:

  1. $html='<pre><code class="language-php">echo \'Hello World!\';</code></pre>';
  2. preg_match_all('/<pre><code class="language-(\w+)">(.*(?!<\code))<\/code><\/pre>/siU',$html,$output_array);
  3. if($output_array){
  4. if(count($output_array[0])>0){
  5. include_once dirname(__FILE__).'/geshi/geshi.php';
  6. foreach($output_array[0] as $k=>$r){
  7. $geshi = new GeSHi(html_entity_decode($output_array[2][$k]),$output_array[1][$k]);
  8. $geshi->enable_line_numbers(GESHI_NORMAL_LINE_NUMBERS);
  9. //$geshi->set_highlight_lines_extra_style($style);
  10. $html=str_replace($output_array[0][$k],$geshi->parse_code(),$html);
  11. }
  12. }
  13. }
  14. 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:

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

 

Lisa kommentaar

Piiratud HTML

  • Lubatud HTML- märgendid: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Automaatne rea- ja lõiguvahetus
  • Veebilehe aadressid ja e-posti aadressid muutuvad linkideks automaatselt.
Pildi CAPTCHA
Enter the characters shown in the image.

neanky logo Neanky uudised

Liikluses on endiselt näha väga palju helkurita liiklejaid. Käes on pime aeg ja helkur on väga vajalik. Ilma helkurita pole sa autojuhile nähtav.

Jätka lugemist →

DPD nimel levib petukiri. Re: Pakk saadaval kohaletoimetamiseks. Tollimaks tasuda 24h jooksul. PETUKIRI!

Jätka lugemist →

Neanky tutvumine on turvaline ja mõeldud kõigile. Eestis asuv ja eestlastele mõeldud võrgustik. Lisa oma kuulutus ja leia kaaslane. Ei mingeid lepinguid.

Jätka lugemist →

Vennaskond soojendab Public Image Ltd-d 12. oktoobril 2023 Tallinnas Helitehases Madara 22 A. Johnny Rotten koos bändiga Public Image Ltd

Jätka lugemist →