How to Install Code Syntax Highlighter.js on PhpBB (Tutorial 2024)

Hello 👽

In this video, I will show you how to install Highlight.js in phpBB.
To keep the video short, I have prepared a file with everything needed for the tutorial and installed the latest versions of phpBB, Node.js, and npm.
Check the description of this video for more information that may help you with PhpBB, Highlight.js, Node.js, and npm.
In this video, I have chosen to demonstrate the method of modifying certain files in the default prosilver theme of phpBB.

There are multiple ways to install and implement a Code Syntax Highlighter on a phpBB theme. The first method involves using an extension, while the second method requires direct modification of the theme files.

You can install the Code Syntax Highlighter in a way that works best for you, possibly even better than the method I’ve shown. I’m only presenting one solution here, but there are other libraries and approaches available for integrating a Code Syntax Highlighter, whether through an extension or by directly modifying the theme.

For this video, I selected Highlight.js with the monokai-sublime.css style, my favorite style from my favorite program, Sublime Text.

Sublime Text - Text Editing
https://www.sublimetext.com

Tags: Code Syntax Highlighter
Code: Select all | Expand All | Collapse All

A brief description of Highlight.js:
It colors the code, making it visually appealing and easier to read.
Highlight.js automatically detects the programming language based on the syntax of the code.

For more information about Code Syntax Highlighter, visit:
https://highlightjs.org
https://github.com/highlightjs/highli...
Links for NPM:
https://unpkg.com/browse/@highlightjs...
https://cdn.jsdelivr.net/gh/highlight...

To execute npm commands in CMD on Windows, you must have the necessary tools installed (Node.js and npm).
npm init -y
npm install @highlightjs/[email protected]
npm install highlight.js

You can download Node.js (which includes npm) from the official Node.js website:
Node.js download page: https://nodejs.org/
Once you install Node.js, npm (Node Package Manager) will be installed automatically, as it comes bundled with Node.js.

To verify the installation:
Open a command prompt (CMD) or terminal.
Type the following commands to check the versions of Node.js and npm:

node -v
npm -v

These commands will display the installed versions of Node.js and npm.

About phpBB:

phpBB is a free and open-source forum software solution that allows users to create their own discussion boards and communities.

For more information about phpBB and to download it, visit:
https://www.phpbb.com/downloads/
https://area51.phpbb.com/phpBB/
https://github.com/phpbb/phpbb

Default files from phpBB (as shown in the video)
The following are the default files from phpBB that were modified or focused on in the video:

HTML Files
/template/
overall_header.html
overall_footer.html
bbcode.html

CSS Files
/theme/
content.css
colours.css
stylesheet.css

JavaScript File
/template/forum_fn.js

Custom
/theme/custom.css

Edit
/theme/stylesheet.css: @import url("custom.css?hash=c9d32cbx");

Pastebin.com - Find all the codes used in the video and additional information here:
https://pastebin.com/raw/MJZtP0fE

To view updates after making changes in phpBB:

HTML: Clear the cache in phpBB to ensure changes are applied correctly.
CSS/JavaScript: Press CTRL + F5 to clear the browser cache and load the updated modifications.

Music:    • TouchTalk - Melody (Christian Craken Remix)  

Facebook Tibers page:   / 100093434905402  
My Counter-Strike 1.6 Server: CS.TIBERSCSX.COM


#Code #Syntax #Highlighter