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:

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

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

The file named syntax_highlighter.module contains the following content:

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']);
                }
            }
        }
    }
}

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:

$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;

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:

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);
}