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.
CAPTCHA
Enter the characters shown in the image.

neanky logo Neanky uudised

Ligi 10 aastat ootamist on läbi saanud ja lõpuks saavad geenidoonorid oma andmeid vaadata. Andmeid on vähe ja üldised, aga asi seegi. Tervis.

Jätka lugemist →

Taevas oli näha virmalisi.

Jätka lugemist →

Raadio. Eesti raadiojaamad Windows rakendus. Kõik parimad Eesti raadiojaamad ühes rakenduses. Kuula kõikjal maailmas. Raadio kuulamine.

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 →

Eesti parimad supluskohad. Kus on parim rand või mõnusam vesi? Kus käid sina suvel suplemas.

Jätka lugemist →

Osalesid Eestis toimuval üritusel ja tegid seal ka pilte? Saada need fotod meie uudistele koos arvustuse või lisainfoga üritusest.

Jätka lugemist →

Sõnala sõnamäng

06.05.2024

Sõnala sõnamäng on uus ja hariv sõnamäng. Eestikeelsed sõnad, sõna arvamisel seletavad sõnastikud. Järjest ette antavate tähtede järgi tuleb moodustada sõnad.

Jätka lugemist →

Saada oma vihje ja fotod uudisest. Lisa oma uudis või loe teiste lisatud uudiseid. Eesti kohalikud uudised. Proovi ajakirjaniku ametit. Reklaami oma toodet.

Jätka lugemist →

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

Jätka lugemist →

Tänavu on lausa kolm ööd järjest võimalik jaane tähistada. Lisaks on taevas ka täiskuu. Ideaalne aeg hulluks minemiseks 😀Kuidas olete oma jaane tänavu veetnud ja kas juba on alkoholi ka rüübatud või ei ole plaanis seda tänavu teha?

Jätka lugemist →

1. Jah, olen viimasel ajal tavapärasest enam väsinud - 66.7% (12 häält)2. Ei ole väsinud - 22.2% (4 häält)3. Alati väsinud - 11.1% (2 häält)Vastanuid kokku: 18

Jätka lugemist →

1. Isamaa - 46.2% (12 häält)2. EKRE - 19.2% (5 häält)3. Reformierakond - 15.4% (4 häält)4. Ei oma eelistust - 7.7% (2 häält)5. Parempoolsed - 3.8% (1 häält)6. SDE - 3.8% (1 häält)7. Midagi muud - 3.8% (1 häält)8. Keskerakond - 0% (0 häält)9. Eesti 200 - 0% (0 häält)10. Rohelised - 0% (0 häält)Vastanuid kokku: 26

Jätka lugemist →

Probleem on lahendatud ja taas saab pilte lisada. 😊

Jätka lugemist →

1. Väga tüütavad - 35% (7 häält)2. Ei midagi erilist - 35% (7 häält)3. Kuidagi palju on neid - 25% (5 häält)4. Pole sääski märganud - 5% (1 häält)Vastanuid kokku: 20

Jätka lugemist →

Sai lennatud neli lendu SAS lennukitega. Neist vaid üks lend sujus probleemideta. Lennukid on väga kulunud, seest määrdunud ja räpased. Lennud hilinevad erinevate probleemide tõttu. Kas ei saada lennukit käima või on kapten puudu. Lennukid on tehniliselt väga halvas korras. Enne pikka lendu pidime tund aega kuumas lennukis istuma, kuna lennuk ei läinud käima. Konditsioneer ka ei toiminud. Pakuti küll tilk jahutavat vett, aga see ei aidanud suurt midagi. Kui lõpuks lennuk välise abiga käima aeti, siis lennates toimus midagi rõhuga. Rõhu muutumis

Jätka lugemist →

Soojuspump

02.05.2024

2023/2024 väga külmal ja korralikul talvel jäi õhksoojuspumbaga kolmetoalise vana erilise soojustuseta maja kütmine 75-100 € juurde. Eriti külm ja kalli elektrihinnaga jaanuar oli 150 €. Üldiselt on õhksoojuspump puiduga kütmisest odavam.

Jätka lugemist →

Kuidas Sul läheb?

02.05.2024

Kas kõigil on viimasel ajal väga palju tööd ja tegemist või on see vaid mul nii?

Jätka lugemist →

Soovitame üritusi

02.05.2024

Suvine hooaeg on avatud, aga kusagile ei oska minna. Ürituste reklaame pole näinud ega tea, mis kusagil toimub. Soovitame häid ja huvitavaid üritusi, mida võiks külastada. Etendused, kontserdid, näitused, võistlused, koolitused jne.

Jätka lugemist →