highlight.js

therealsujitk

highlight.js

Latest Stable Version Total Downloads

A Flarum extension that integrates your forum with highlight.js.

Preview

Requirements

The flarum/bbcode extension is necessary for this extension to work.

Installation

composer require therealsujitk/flarum-ext-hljs

Updating

composer update therealsujitk/flarum-ext-hljs

therealsujitk

Note: This extension still has a few bugs. As of now there are only 8 themes. I will be adding themes in later versions(alphabetically). If you would like a theme sooner please request for it on GitHub.

As of now, I am aware that the syntax is not fully highlighted in the post preview. If you face any other issues please reply to this discussion or open an issue on GitHub.

I hope you like this extension. If you want me to add any other features, please let me know.

luceos

Out of curiosity, why are both bbcode and markdown required?

therealsujitk

luceos well, BBcode actually does all the work. It is the extension that activates highlight.js when a post loads or when text is entered in the textArea. This extension simply alters the theme set be BBCode. I added Markdown because without it you cannot add code in the first place using ` or ``` at the beginning and at the end.

RelatedTitle

Looks great, thank you a lot for this. My only suggestion is that you add more themes and maybe a preview of how each one would look. Apart from this, it looks really good. 😃

therealsujitk

RelatedTitle Thanks for your feedback! New themes will be coming soon in later versions. If you want a specific theme sooner you can always request for it on GitHub. As of now the themes can be found on hljs demos. In future, I'll try adding that in the admin panel itself.

Littlegolden

Nice, thank you.

jordanjay29

therealsujitk I added Markdown because without it you cannot add code in the first place using ` or ``` at the beginning and at the end.

[code][/code] tags should still work.

therealsujitk

jordanjay29 Oh right 🤦‍♂️. I'll remove it.

Anberlin

Hey there,

thanks for the extension. I am not sure how hard it is to do, but it world be great, if the highlighting would be available on the admin area too, in the window where custom CSS/LESS code can be added. It would be so much better to have some highlighting and formatting there. But that is just an idea!

Thanks again!

therealsujitk

Anberlin I'm afraid this cannot be done as that section is in <textarea> and not in <pre><code>.

Ki4en

Anberlin This will probably require a code editor, like ace, because highlighters like hightlight.js don't support editing or real-time highlighting & linting.

therealsujitk

clarkwinkelmann I don't understand why textareas are discussed here

Anberlin asked if it was possible to have syntax highlighting in the <textarea> field in the admin panel under appearance.

therealsujitk

v1.1.0

Fixed theme: Default
Fixed theme: A 11 Y Dark
Fixed theme: A 11 Y Light
Fixed theme: Agate
Fixed theme: An Old Hope
Fixed theme: Androidstudio
Fixed theme: Arduino Light
Fixed theme: Arta
Fixed theme: Ascetic
Added theme: Atelier Cave Dark
Added theme: Atelier Cave Light
Added theme: Atelier Dune Dark
Added theme: Atelier Dune Light
Added theme: Atelier Estuary Dark
Added theme: Atelier Estuary Light
Added theme: Atelier Forest Dark
Added theme: Atelier Forest Light
Added theme: Atelier Heath Dark
Added theme: Atelier Heath Light
Added theme: Atelier Lakeside Dark
Added theme: Atelier Lakeside Light
Added theme: Atelier Plateau Dark
Added theme: Atelier Plateau Light
Added theme: Atelier Savanna Dark
Added theme: Atelier Savanna Light
Added theme: Atelier Seaside Dark
Added theme: Atelier Seaside Light
Added theme: Atelier Sulphurpool Dark
Added theme: Atelier Sulphurpool Light
Added theme: Atom One Dark Reasonable
Added theme: Atom One Dark
Added theme: Atom One Light

Updating

Use Bazaar or update manually with composer:

composer update therealsujitk/flarum-ext-hljs

therealsujitk

Ki4en That doesn't really matter. Flarum uses highlight.js and you see real-time highlighting in the post preview.

Ki4en

therealsujitk Maybe you can add these classes to the textarea then?

therealsujitk

Ki4en hljs and most other syntax highlighters on recognize code when it is inside <pre><code>.

Ki4en

therealsujitk Yeah, I checked and it doesn't work with textarea. :/

Kylo

check CodeMirror out for textareas but i'm not sure if it supports CSS/LESS.

clarkwinkelmann

I don't understand why textareas are discussed here, but if anyone wants to see an implementation of CodeMirror in Flarum, my Scratchpad extension uses it for the scratchpad panel of the admin dashboard.

The editor isn't WYSIWYG, so no real time highlighting in the post composer is possible anyway.