Programming language syntax highlighting

[sdkc]

I'd like the ability to highlight a section of text while creating a post and define it as "code" and have proper syntax highlighting and indentation applied. A good example of this would be at the site StackOverflow.com (Example from a random post: stackoverflow.com/questions/25819015/why-avoid-macros-in-hresult-handling). This would be largely beneficial to communities such as mine that exist for the discussion of programming and software development.

Would this be an appropriate request for a plugin? I have done some searching but does it possibly exist somewhere already?

Thanks!

[Chris]

Proboards comes with the Codemirror syntax highlighter built in but it is used only in the admin panel when viewing codes such as layout templates. Early in the V5 release I created a proof-of-concept plugin but never followed up on it since it was not technically what was being requested at that time. See if that is more inline with your particular request and maybe it can be improved

Sept 2, 2016 8:59:50 GMT -8 Chris said:

Forgot to mention that the plugin download link was updated to incorporate the overlooked changes

[sdkc]

I'm not entirely sure how to get this to work. I disabled my other plugins and imported and enabled that one. Now I should be able to create a post - highlight something that should be identified as code - and put it into the [_code] tags, right?

[Chris]

It's been so long that I had forgotten one optional detail, the Codemirror in Proboards comes configured by default to do syntax highlighting for the following:

• CSS
• javascript
• xml
• htmlmixed

Put the code in [code][/code] tags and the plugin will default to rendering the contents as "htmlmixed". If you wish to force a specific rendering then add that as a title attribute to the code tag

[code title="javascript"]
//JAVASCRIPT CODE HERE
[/code]

The Codemirror uses a pluggable system so a highlighter for pretty much any other language can be plugged right in but right now it is limited to those four preconfigured choices and the MIMEtype definition of those choices. Inspect CodeMirror.modeExtensions  and CodeMirror.mimeModes for further info.

SPOILER: Click to show

[sdkc]

That works.

Is there no way to change the preconfigured modes?

Can specific buttons be added for each of the modes?

Thanks!

[Chris]

Sept 14, 2014 8:19:38 GMT -8 sdkc said:

That works.

Is there no way to change the preconfigured modes?

Can specific buttons be added for each of the modes?

Thanks!

As I said in my last post it is a pluggable system and the link I provided lists over 90 languages that could be added (officially) not to mention any unofficial language extensions. Each language is encapsulated in a javascript file so it is most likely as simple as adding the files for the languages you wanted included to your forum's global header.

If by button you are referring to buttons for the post editor (e.g.  ) then there is already a plugin that allows creating your own custom ubbc buttons

[Chris]

This plugin is now in the local support library as Programming Language Syntax Highlighting
_{All further updates and support issues will be handled in that thread}

Update: I made a few additions

1. found a CDN that hosted the CodeMirror languages so created a tab in the plugin where you could simply check and uncheck any of the available languages. It's in an autoform format so if you write your own language handler addon it is simple to add it to the list of available languages.
   SPOILER: Click to show
   
   
   
   
2. 
   to be continued... v2.3
   
   

same link, same bat channel

[sdkc]

Awesome!

I'm still having trouble though.
With C and C++ enabled I did the following (Without the \):

[\code title="clike"]
//This is a test
std::string c = "C++";
int i,x,y,z;
bool true = false;

void Testing();
{
if (true)
{
true = false;
}
}
[/code]"

The box shows up with the correct gutter but each of the lines of code takes the gutter's style which makes all of the text white on a white background.

InspectElement shows each line as <pre> </pre>

[Chris]

Without seeing it for myself I cannot say what the problem might be but you have the option to change the color scheme by clicking the thing that looks like an eye in the upper right. There are about 5 or six schemes offered by Proboards and each click will cycle through them but you could roll your own scheme if you feel the need.











If you want me to take a look to see what might be overriding or causing a color spat then you would need to offer an url for inspection

[sdkc]

It seems to be specific to the clike mode.

Javascript works fine and looks similar to your screenshots. Additionally if I inspect element on any of the lines each one of the strings gets a css span applied to it such as cm-variable or cm-keyword.

With clike however; none of these style spans are being applied meaning that the error lies in the JScript not the CSS.

Are you testing in a sandbox forum of some sort? I'm sure if you paste the C++ I provided above you would likely see the same result.

[sdkc]

Correction: It appears the modes native to the board work but none of the additional ones do.

CSS, HTML, Javascript all show and look great.

C++, VB Script, VB.net do not work. The modes simply don't seem to be getting hooked.

[Chris]

[Chris]

sounds like a timing issue, I'll change it to a promise object with the conversion done after all helper scripts load to see if that helps.

[Chris]

OK I added the conversion into the done() method of the deferred script loader ( plugin now updated to v.0.2.1) so see if that brings joy. Also since the clike mode handler covers SEVERAL language types (C,C++,C#,java,etc.) it is preferred you use the MIME type rather than the mode name since I am not sure if it is capable of detecting which language it should be highlighting, so for C++ it would be "text/x-c++src", for C# it's "text/x-csharp" and so on

[sdkc]

Ok, awesome! Thanks so much! I didn't realize you could use the mime-types as the titles. Some of the names don't work but the mime-types all seem to.

Thanks again!