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



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

neanky logo Neanky uudised

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 →

Rahandus - Kauplemisel põhinev veebimäng. Osta, müü õigel ajal. Arenda firmat. Kogu raha ja saa rikkaks. Anna või võta laenu. Teeni kauplemiselt. Aktsiaturg.

Jätka lugemist →

Sinu läheduses toimub midagi põnevat ja sa soovid seda teistega jagada? Neanky uudised on parim ja kiireim viis selle tegemiseks.

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 →

Oma ürituse reklaamimine internetis. Lisa reklaamuudis tasuta. Ürituse korraldamine. Inimeste teavitamine.

Jätka lugemist →