News:

Wondering if this will always be free?  See why free is better.

Main Menu

highlight.js for SMF

Started by Bugo, August 28, 2011, 01:18:09 PM

Previous topic - Next topic

Bugo

Link to the mod

This script highlights syntax in code examples on your forum.
It is very easy to use because it works automatically: finds blocks of code, detects a language, highlights it.
Supported languages: HTML/XML, Javascript, CSS, PHP, Ruby, Perl, Python, C++, C#, Java, SQL, Bash, etc.


All supported languages and styles

How to use? Very simply!

[code]your code[/code]


Advanced using

[code=language]your code[/code]


One more way

[code]your code[/code]


If you want numbering to start from some other value than 1, you can specify a numbering offset:

[code start=10]your code[/code]


Features:
  • You can choose code formatting scheme
  • You can choose font size within code blocks
  • Highlighting works automatically: finds blocks of code, detects a language, highlights it — you don't need to specify any language

Edit this CSS in /Themes/default/css/highlight.css to customize line numbers:
.hljs-ln-numbers {
    text-align: center;
    color: #f36;
    border-right: 1px solid #f36;
    vertical-align: top;
    min-width: 25px;
}

Available translations:
  • English
  • Russian
  • French
  • Spanish
  • German


H3lioz

How do i make it look like the picture???? :(

PS. Good job :D

Bugo

You can go to Modification settings and choose highlighting's template.

xephonia

Hi there. Love the mod, but I have one small problem with it: It treats URLs like part of a comment due to the two forward slashes, which throws off the syntax highlighting more often than not. I've attached a small screenshot for example.

Any way to make it more intelligent about detecting comments?

Bugo

Try edit *.css file of selected highlighting theme (see /Themes/default/css/highlight/). Or use [code=no-highlight] text [/code] to disable highlighting at all.

xephonia

I don't think that will help. I like the syntax highlighting, but the fact that the mod doesn't know the difference between

// this is a comment

and

hxxp://this_is_not_a_comment

is in the mod itself. Just wondering if you can tweak the handling of the double forward slash in your regular expression, or whatever you're using to determine if it's a comment or not.

RaptorUK

Quote from: Bugo on August 28, 2011, 01:18:09 PM
Link to Mod

This script highlights syntax in code examples on your forum.
It is very easy to use because it works automatically: finds blocks of code, detects a language, highlights it.
Supported languages: HTML/XML, Javascript, CSS, PHP, Ruby, Perl, Python, C++, C#, Java, SQL, Bash etc.



Hi,  is it possible to edit this mod to enable the support of additional languages ?  I'm happy to do the work myself I just need some pointers on what I need to edit,  for example I want numbers in green, function names, e.g. Print, Comment, etc in pink,  comments in black . . .

Bugo

To enable the support of all languages just download full highlight.pack.js and replace your /Themes/default/scripts/highlight.pack.js.

To change color of various elements just edit *.css file of your highlighting style (/Themes/default/css/highltight/).

RaptorUK

Quote from: Bugo on October 23, 2011, 12:03:51 PM
To enable the support of all languages just download full highlight.pack.js [nofollow] and replace your /Themes/default/scripts/highlight.pack.js.

To change color of various elements just edit *.css file of your highlighting style (/Themes/default/css/highltight/).

The language I am interested in (mql4)  isn't listed . . .  what are my options to add it ?

Bugo

Well, try write to author of highlight.js and ask him.

RaptorUK

Quote from: Bugo on October 24, 2011, 12:42:58 AM
Well, try write to author of highlight.js and ask him.

Ah I see,  I didn't realise you weren't the Author,  many thanks.

Apllicmz

Good mod
when update dont forget portuguese





Bugo


gevv

Hello,

my problem big  code no color

problem video : http://postimage.org/image/lxebl04ij/

normal smf code system no problem

thanks

ElkArte is a modern, powerful community building forum software. https://www.elkarte.net/

tfs

Nice mod, but it causes long lines to be wrapped, even when it's disabled.

To reproduce...

Add an SQL query that is one very long line.  Note that in standard SMF the long line scrolls off the screen to the right, and a horizontal scroll bar is enabled.

After installing this mod the horizontal scroll bar is gone and the lines wrap.  If you disable this mod by unchecking the "Enable syntax highlighting" box the syntax highlighting goes away, but the long lines are still wrapped with no horizontal scroll bar.

Edit: This is the version from April 11, 2012, 03:35:34 AM
A good tree cannot bring forth evil fruit, neither can an evil tree bring forth good fruit.

Bugo

I have this scrollbar. Which browser are you using? Can you attach your "very long SQL query" for example?

tfs

I'm using Firefox 11.0. 

After further testing I found that it's only inside of the SA Knowledge Base mod where if I disable but don't uninstall the code highlighter, the wrap doesn't work.  On a vanilla forum the wrap does work with Code Highlighter disabled.  Apparently there's some interaction between SA Knowledge Base and Code Highlighter.

With Code Highlighter installed and active, the wrap no longer works even on a vanilla forum.

SELECT contact1.accountno, contact1.contact, count(*) as total FROM contact1 left outer join contsupp on contact1.accountno = contsupp.accountno WHERE contsupp.rectype = "P" and contsupp.contact = "E-mail Address" group by contact1.accountno, contact1.contact having count(*) > 1 order by total
A good tree cannot bring forth evil fruit, neither can an evil tree bring forth good fruit.

Bugo

Open highlight.css, find
white-space: pre-wrap;
and remove it.

gevv

@Bugo

big code add auto

[noae][code] 

[noae] ? Code Highlighting not  work

[/code]
ElkArte is a modern, powerful community building forum software. https://www.elkarte.net/

Bugo

Can you post this code here?

Advertisement: