Advertisement:

Author Topic: Code Highlighting  (Read 14673 times)

Offline Bugo

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 1,452
  • Gender: Male
    • dragomano on GitHub
    • @dragomano on Twitter
    • Russian translations for SMF mods
Code Highlighting
« 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.


How to use? Very simply!
[code]your code[/code]

Advanced using
[code=language]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 specify any language

Available translations:
  • English
  • Russian

Russian support

Offline H3lioz

  • Jr. Member
  • **
  • Posts: 333
Re: Code Highlighting
« Reply #1 on: September 11, 2011, 03:31:55 PM »
How do i make it look like the picture???? :(

PS. Good job :D

Offline Bugo

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 1,452
  • Gender: Male
    • dragomano on GitHub
    • @dragomano on Twitter
    • Russian translations for SMF mods
Re: Code Highlighting
« Reply #2 on: September 12, 2011, 02:20:18 AM »
You can go to Modification settings and choose highlighting's template.

Offline xephonia

  • Newbie
  • *
  • Posts: 2
Re: Code Highlighting
« Reply #3 on: October 12, 2011, 07:22:17 PM »
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?

Offline Bugo

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 1,452
  • Gender: Male
    • dragomano on GitHub
    • @dragomano on Twitter
    • Russian translations for SMF mods
Re: Code Highlighting
« Reply #4 on: October 12, 2011, 11:21:58 PM »
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.

Offline xephonia

  • Newbie
  • *
  • Posts: 2
Re: Code Highlighting
« Reply #5 on: October 12, 2011, 11:28:20 PM »
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.

Offline RaptorUK

  • Semi-Newbie
  • *
  • Posts: 11
Re: Code Highlighting
« Reply #6 on: October 23, 2011, 10:22:45 AM »
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 . . .

Offline Bugo

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 1,452
  • Gender: Male
    • dragomano on GitHub
    • @dragomano on Twitter
    • Russian translations for SMF mods
Re: Code Highlighting
« Reply #7 on: October 23, 2011, 12:03:51 PM »
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/).

Offline RaptorUK

  • Semi-Newbie
  • *
  • Posts: 11
Re: Code Highlighting
« Reply #8 on: October 23, 2011, 06:31:33 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 ?

Offline Bugo

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 1,452
  • Gender: Male
    • dragomano on GitHub
    • @dragomano on Twitter
    • Russian translations for SMF mods
Re: Code Highlighting
« Reply #9 on: October 24, 2011, 12:42:58 AM »
Well, try write to author of highlight.js and ask him.

Offline RaptorUK

  • Semi-Newbie
  • *
  • Posts: 11
Re: Code Highlighting
« Reply #10 on: October 24, 2011, 03:28:15 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.

Offline Joomlamz

  • SMF Hero
  • ******
  • Posts: 2,594
  • Gender: Male
  • Suporte SmfPT
    • apllicmz on Facebook
    • apllicmz on GitHub
    • https://www.linkedin.com/in/aplic on LinkedIn
    • @aplichosting on Twitter
    • Webdesign
Re: Code Highlighting
« Reply #11 on: December 26, 2011, 12:34:09 PM »
Good mod
when update dont forget portuguese





Offline Bugo

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 1,452
  • Gender: Male
    • dragomano on GitHub
    • @dragomano on Twitter
    • Russian translations for SMF mods
Re: Code Highlighting
« Reply #12 on: December 26, 2011, 01:13:31 PM »
Thanks, I'll not forget :)

Offline gevv

  • Full Member
  • ***
  • Posts: 519
  • Gender: Male
  • 320volt.com elektronik ve biraz daha fazlası
    • Elektronik projeler uygulamalar bilgiler web grafik
Re: Code Highlighting
« Reply #13 on: March 15, 2012, 02:08:32 PM »
Hello,

my problem big  code no color

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

normal smf code system no problem

thanks

320volt.com elektronik ve biraz daha fazlası

Offline tfs

  • Full Member
  • ***
  • Posts: 422
  • Gender: Male
Re: Code Highlighting
« Reply #14 on: April 13, 2012, 06:57:06 PM »
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.

Offline Bugo

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 1,452
  • Gender: Male
    • dragomano on GitHub
    • @dragomano on Twitter
    • Russian translations for SMF mods
Re: Code Highlighting
« Reply #15 on: April 13, 2012, 10:19:45 PM »
I have this scrollbar. Which browser are you using? Can you attach your "very long SQL query" for example?

Offline tfs

  • Full Member
  • ***
  • Posts: 422
  • Gender: Male
Re: Code Highlighting
« Reply #16 on: April 14, 2012, 10:19:06 AM »
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.

Code: [Select]
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.

Offline Bugo

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 1,452
  • Gender: Male
    • dragomano on GitHub
    • @dragomano on Twitter
    • Russian translations for SMF mods
Re: Code Highlighting
« Reply #17 on: April 14, 2012, 12:01:45 PM »
Open highlight.css, find
Code: [Select]
white-space: pre-wrap;and remove it.

Offline gevv

  • Full Member
  • ***
  • Posts: 519
  • Gender: Male
  • 320volt.com elektronik ve biraz daha fazlası
    • Elektronik projeler uygulamalar bilgiler web grafik
Re: Code Highlighting
« Reply #18 on: April 14, 2012, 12:34:53 PM »
@Bugo

big code add auto

Code: [Select]
[noae][code] 

[noae] ? Code Highlighting not  work

[/code]
320volt.com elektronik ve biraz daha fazlası

Offline Bugo

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 1,452
  • Gender: Male
    • dragomano on GitHub
    • @dragomano on Twitter
    • Russian translations for SMF mods
Re: Code Highlighting
« Reply #19 on: April 14, 2012, 10:18:45 PM »
Can you post this code here?