PureBASIC Syntax Highlighting for highlight.js
Posted: Thu Apr 07, 2016 6:52 pm
Hi everybody,
I've created PureBASIC syntax highlighting files for highlight.js, the famous browser-side code highilighter in JavaScript:
UPDATES:
Getting the Files
PureBASIC syntax file has been included in the highilight.js official repo:
And is now available from the official website:
PureBASIC Modded Syntax Variant
One feature I proposed didn't make it though: highlighting procedure calls — highilight.js has a minimalistic philosophy which doesn't allow for this features.
Unfortunately, this means that syntax highilighting doesn't emulate PB IDE 100%.
But I am running a fork in my GitHub repo > PureBASIC branch which adds to the PB javascript file the class required for highlighting also procedure calls — thus giving PB source a 100% native IDE-like feel. Also, this fork/branch offers a variant of purebasic.css file intended to highlight PB code only, acting as a bolierplate for custom projects:
In this branch you’ll find some pre-built HLJS packages, with either PB only, or PB + some combinations of common languages — or the «All» packages, which includes all HLJS packages along with the modded PB syntax. You only need to download the prebuilt packages, no Node.js building/compiling required. You’ll also find documentation and examples.
Motivations...
I work quite a lot on sites like GitHub, Bitbucket, as well as with Markdown and HTML documentations, and I've noticed that there is an (unfortunate) lack of syntax highlighters for PureBASIC code.
After some research, I've found so far that the only syntax highlighter supporting PureBASIC is GeSHi — a PHP syntax highlighter, thus working only on server side.
There is also an online syntax highlighter: Quick Highlighter — you can paste your source code in a form, and it will output HTML with highilighting tags.
There are a few IDE and code editor syntax files, but they have no application in highlighting code on webpages, API documentation, or ebooks.
And there are some PB codes (both around the forums, as well as in the SDK that comes along with it), but I was interested on something to automatically highlight code pasted in websites, markdown files, API documentations, ecc.
So, I though it was time to create one... And I chose highilight.js because (1) it's popular, (2) it's lightweight, (3) it works on the browser via JavaScript (no server-code needed), (4) it's compatible with many Static and Dynamic CMS.
The Why and How of Syntax Highlighting...
I hope you'll allow me for some verbosity here — just wanted to make sure all might benefit from this post, even those not aquainted with syntax highlighers. Thos who are ... well, just skip over it...
Syntax highlighting makes code look elegant. Nothing mandatory about it, but it makes reading other people's code a better experience.
Online services like GitHub use syntax highlighter to automatically detect and beautify code visualization. The same goes for Markdown and HTML documentation:
In Markdown you can paste PB code like this:
and it will be converted to HTML:
And here is where the "magic" of highilight.js enters the scene: its JavaScript will detect (on page loading completion) all <pre><code> occurances, and either try to autodetect the language, or use the class=language (either in <pre> or <code>) as a directive of the language hereby containted.
Using highilight.js...
highilight.js is dead simple to use, it's just a JavaScript file, which needs to be linked to your HTMl document, and requires a single line of code to work. Full instructions can be found on the website:
When my contributed PureBASIC syntax definition file (and stylesheet) will be integrated into project, you'll be able to download a customizable version of highilight.js from the download page, which allows you to choose which languages syntaxes to include/exclude.
Untill then, you can download it from my repo (PureBASIC branch!), via Git or clicking here to get a zipped copy of the repo (this link will expire once PB syntax is integrated in highilight.js, because the branch will be deleted!)
Final Thoughts...
I hope this syntax highlighting file might inspire others to implement something alike in other highlighters.
This highlighter is extremely simple: it relies on Regular Expressions, and it works well — the single small annoying detail is that it will color in green also the braces of Procedures, whereas in PB IDE they are kept in black. But it shouldn't be to much of a bother. As for the coloring, I've followed the default color scheme employed in PB IDE. The stylesheet I've created for it (also called PureBASIC) follows that color scheme. Look at it's CSS (source, unminified) file, it contains quite a few useful comments.
Most definitely, seeing PB syntax implemented for Pygments would be a great achievement. highilight.js allows code highlighting on all things HTML/XML (websites, HTML exe ebooks, abd epub); but Pygments would allow syntax highlighting also in non-HTML documents (with tools like Pandoc, it could be integrated to output to docx, LaTex and PDF) — possibly, this could be already done with GeSHi, but I haven't looked into it yet.
If anyone has links to other code highlighting resources that work with PureBASIC, please paste some links and info in comments here — as well as for any interesting related project!
Hope you'll enjoy it!
Tristano (Italy)
I've created PureBASIC syntax highlighting files for highlight.js, the famous browser-side code highilighter in JavaScript:
UPDATES:
- (2016-11-23)
- (2016-11-04)
- NEW PB syntax now available for Highlight, a CLI/GUI cross-platform tool:
- (2016-04-13)
- PB syntax file is now part of highlight.js
- I'm maintaining a fork of highlight.js specifically for PB projects (see below).
- Fixed the "green procedures braces" issue (now they are black, mimicking 100% PB IDE)
- (2016-04-07)
- Added screenshot
Getting the Files
PureBASIC syntax file has been included in the highilight.js official repo:
And is now available from the official website:
PureBASIC Modded Syntax Variant
One feature I proposed didn't make it though: highlighting procedure calls — highilight.js has a minimalistic philosophy which doesn't allow for this features.
Unfortunately, this means that syntax highilighting doesn't emulate PB IDE 100%.
But I am running a fork in my GitHub repo > PureBASIC branch which adds to the PB javascript file the class required for highlighting also procedure calls — thus giving PB source a 100% native IDE-like feel. Also, this fork/branch offers a variant of purebasic.css file intended to highlight PB code only, acting as a bolierplate for custom projects:
In this branch you’ll find some pre-built HLJS packages, with either PB only, or PB + some combinations of common languages — or the «All» packages, which includes all HLJS packages along with the modded PB syntax. You only need to download the prebuilt packages, no Node.js building/compiling required. You’ll also find documentation and examples.
Motivations...
I work quite a lot on sites like GitHub, Bitbucket, as well as with Markdown and HTML documentations, and I've noticed that there is an (unfortunate) lack of syntax highlighters for PureBASIC code.
After some research, I've found so far that the only syntax highlighter supporting PureBASIC is GeSHi — a PHP syntax highlighter, thus working only on server side.
There is also an online syntax highlighter: Quick Highlighter — you can paste your source code in a form, and it will output HTML with highilighting tags.
There are a few IDE and code editor syntax files, but they have no application in highlighting code on webpages, API documentation, or ebooks.
And there are some PB codes (both around the forums, as well as in the SDK that comes along with it), but I was interested on something to automatically highlight code pasted in websites, markdown files, API documentations, ecc.
So, I though it was time to create one... And I chose highilight.js because (1) it's popular, (2) it's lightweight, (3) it works on the browser via JavaScript (no server-code needed), (4) it's compatible with many Static and Dynamic CMS.
The Why and How of Syntax Highlighting...
I hope you'll allow me for some verbosity here — just wanted to make sure all might benefit from this post, even those not aquainted with syntax highlighers. Thos who are ... well, just skip over it...
Syntax highlighting makes code look elegant. Nothing mandatory about it, but it makes reading other people's code a better experience.
Online services like GitHub use syntax highlighter to automatically detect and beautify code visualization. The same goes for Markdown and HTML documentation:
In Markdown you can paste PB code like this:
Code: Select all
```PureBASIC
; some PureBASIC source code...
MSG$ = "Hello World!"
Debug MSG$
```
Code: Select all
<pre><code class="PureBASIC">
; some PureBASIC source code...
MSG$ = "Hello World!"
Debug MSG$
</code></pre>
Using highilight.js...
highilight.js is dead simple to use, it's just a JavaScript file, which needs to be linked to your HTMl document, and requires a single line of code to work. Full instructions can be found on the website:
When my contributed PureBASIC syntax definition file (and stylesheet) will be integrated into project, you'll be able to download a customizable version of highilight.js from the download page, which allows you to choose which languages syntaxes to include/exclude.
Untill then, you can download it from my repo (PureBASIC branch!), via Git or clicking here to get a zipped copy of the repo (this link will expire once PB syntax is integrated in highilight.js, because the branch will be deleted!)
Final Thoughts...
I hope this syntax highlighting file might inspire others to implement something alike in other highlighters.
This highlighter is extremely simple: it relies on Regular Expressions, and it works well — the single small annoying detail is that it will color in green also the braces of Procedures, whereas in PB IDE they are kept in black. But it shouldn't be to much of a bother. As for the coloring, I've followed the default color scheme employed in PB IDE. The stylesheet I've created for it (also called PureBASIC) follows that color scheme. Look at it's CSS (source, unminified) file, it contains quite a few useful comments.
Most definitely, seeing PB syntax implemented for Pygments would be a great achievement. highilight.js allows code highlighting on all things HTML/XML (websites, HTML exe ebooks, abd epub); but Pygments would allow syntax highlighting also in non-HTML documents (with tools like Pandoc, it could be integrated to output to docx, LaTex and PDF) — possibly, this could be already done with GeSHi, but I haven't looked into it yet.
If anyone has links to other code highlighting resources that work with PureBASIC, please paste some links and info in comments here — as well as for any interesting related project!
Hope you'll enjoy it!
Tristano (Italy)