Displaying code/syntax on a web page

Displaying code/syntax on a web page

Every good programmer has his own collection of necessary code snippets. Various tests and experiments.
In most cases, they are stored somewhere in projects or in separate files.

Of course, most of the necessary code samples can already be found on the big wide web, but since Google tends to be a little stupid from time to time or doesn't want to give the right answer. Your own collection of codes is very useful.

Below is an example of how to add beautiful and readable code to your website.

Works with: Drupal 9 and 10, PHP web pages.

 

1. Creating a Drupal module (PHP does not add a Drupal module to a website).

First, create a folder called syntax_highlighter in the modules folder of Drupal. Of course, you can use the project name of your choice here and you don't have to use syntax_highlighter.

Next, you need to create a file called syntax_highlighter.info.yml

The file named syntax_highlighter.info.yml contains the following content:

  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

 

Next, you need to create a file called syntax_highlighter.module

The file named syntax_highlighter.module contains the following content:

  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. }

When creating a Drupal module, the last step is to create a folder called geshi in the syntax_highlighter folder.

 

2. Adding the Gesh project to your module or to your PHP website.

Since we are using the Gesh project to decorate the code, the necessary PHP scripts must be downloaded from this project.
To do this, you need to visit the project address 
https://github.com/GeSHi/geshi-1.0/tree/master/src 
and from there download the file geshi.php and the adjacent folder called geshi.
The downloaded file and folder must be placed in the already created folder named geshi.

Drupal users can now activate this generated module on their Drupal modules page.
To enter the code on the web page, use the CKEditor 5 editor and the "code block" button there.

 

Non Drupal based PHP websites

Add the following code snippet to your PHP file:

  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;

 

Style

In addition, it is now possible to design the code according to your wishes. To do this, open the PHP file of the desired programming language in the geshi/geshi folder and change the colors inside as you wish.

In addition, you could also add the following lines in your general CSS style file:

  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. }

Add new comment

Restricted HTML

  • Allowed HTML tags: <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>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
CAPTCHA
Enter the characters shown in the image.

neanky logo Neanky uudised

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 →

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 →

22. aprilli hommikul oli maa lumest valge ja lund sadas aina juurde. Taas oli talv tagasi. 23. aprill talv kestab. Lund maas 2-3cm. Õhutemperatuur -2 kuni 1 kraadi. Ilmateade lubab 24ndal 8 kraadi sooja ja lõpuks peaks talv läbi saama.

Jätka lugemist →

Eestis on veel peale Maksekeskuse ja Montonio pangalinkide pakkujaid. LHV pank pakub koostöös EveryPayga pangalinke e-poodidele ja lisaks ka kõiki muidu makselahendusi. Kahjuks on vaid võimatu tuvastada nende hinnakirja. Pole teada palju kuumakse on ja palju tehingu pealt teenustasu võtavad. Info on väga vähene. Dokumentatsioon arendajale on nähtav ja lihtsasti mõistetav. Lisaks ühendub kõigi levinumate e-poe moodulitega. Esto pakub lisaks pangalinkidele laene ja järelmaksu. Nende hinnakiri on ka peidetud või salajane. Tehingutasu näitab 0.00 €

Jätka lugemist →

Kas jood piima?

11.04.2024

Joon küll piima; piim on hea; lehmadel on samuti hea; kui keegi ei jooks piima, siis ei oleks ka lehmi!

Jätka lugemist →

Kui sind huvitab laiemalt rahva arvamus mõnes küsimuses, siis soovita seda siia. Me lisame selle oma külastajatele vastata ja tulemust on hiljem kõigile näha. Küsimus peab olema sobilik igas vanuses vastajale ja ei tohi olla solvav. 2-10 vastusevarianti.

Jätka lugemist →

1. Isamaa - 34.1% (15 häält)2. EKRE - 29.5% (13 häält)3. Ei oma eelistust - 13.6% (6 häält)4. Reformierakond - 11.4% (5 häält)5. Midagi muud - 6.8% (3 häält)6. SDE - 2.3% (1 häält)7. Rohelised - 2.3% (1 häält)8. Eesti 200 - 0% (0 häält)9. Keskerakond - 0% (0 häält)10. Parempoolsed - 0% (0 häält)Vastanuid kokku: 44

Jätka lugemist →

Mõned päevad on nüüd taas tunda olnud halba aega. Kõik tegemised ebaõnnestuvad ja olemine on kuidagi kehva. Kohe kuidagi ei lähe. Maailmas toimub aina hulle asju ja ilm on ka halb olnud. Virmalised, täiskuu ja mida kõike veel. Kas tunnete ka midagi veidralt halba?

Jätka lugemist →