Home Upgrade Search Memberlist Extras Hacker Tools Award Goals Help Wiki Contact

Better Code Tags Userscript | 54 different syntaxes | Select All Button [1.0.1]

Click this link to download the userscript.

I'm frustrated with the current way code blocks function on HackForums. Are you as well? If so, read further.

I made a suggestion regarding code tags and some improvements - and Omni posted without rejecting it, which is great news. It might be a while before it's implemented though (and I may have to help) - but in the meantime, I have created a Userscript that somewhat improves upon what we currently have. Basically, it turns the crappy code tags into better ones, with support for 54 languages and automatic syntax detection.

Description:

This script will turn the plain old boring and functionless [code] and php tags on HackForums.net into more informative counterparts of themselves that match the theme of the site.

Features support syntax highlighting for over 50 languages (instead of just PHP), a select all button to highlight all of the code within a block, an 'expand' button to extend the height of the code block to the full length of the code and automatic syntax detection.

The automatic syntax detection is not entirely accurate, as it uses a heuristic algorithm to detect keywords unique to each language - the language with the most keywords wins. Very often you will see the wrong language highlighted, but not all the time. This is still better than only having it highlight PHP.

In the future, I might add a means of manually setting the language in - but for now I've done enough coding on this script.

Unfortunately, I have yet to find a solution to the indentation problems with the [code] tags. For now, consider using 2-space indentation a best practice. Also, there is no way to fix the truncation of repeated text nodes, so do not bother me about it.

New in v1.0.1

I've updated the userscript to allow manual syntax highlighting when it isn't smart enough to detect the correct language. This is done in the form of a comment on the first line of the code block with a flag - "this.code.is" followed by the CSS class name the highlighter attributes to the language. For example;

If I wanted to make my code Javascript:

// this.code.is javascript

or maybe CoffeeScript:

# this.code.is coffeescript

And so on.

PHP Code

<?php 
// this.code.is php 
PHP Code

<?php 
// this.code.is javascript 
PHP Code

<?php 
# this.code.is coffeescript 
PHP Code

<?php 
// this.code.is cpp 

Finding the correct class names for your language might be tricky, so if you're unsure - here's a webpage you can visit: http://softwaremaniacs.org/media/soft/hi.../test.html

The green text on the left of each code block is the CSS class for that language.

Also, I've made the names of some of the languages more concise, for example "AVR Assembler" instead of "AVRASM".

Screenshot of what it does:

[img]http://i.imm.io/Yl6d.png[/img]
This is sexy as hell, I installed it with grease monkey on FF and haven't found any flaws yet.
(Mar 6, 2013 02:28 AM)Kappa Wrote:  This is sexy as hell, I installed it with grease monkey on FF and haven't found any flaws yet.

I'm glad you like it. I'll be adding new features later.
Looks great, but would be cool if it actually worked on the programming languages HF supports. Browsing the C++ section you only see it recognizes languages like AVRASM, APPLESCRIPT, VALA...everything but C++. Same with other sections.
Syntax highlighting is still better than HF's implementation. So good luck on improving this.

Examples (Click to View)
(Mar 6, 2013 06:21 AM)Dbof Wrote:  Looks great, but would be cool if it actually worked on the programming languages HF supports. Browsing the C++ section you only see it recognizes languages like AVRASM, APPLESCRIPT, VALA...everything but C++. Same with other sections.
Syntax highlighting is still better than HF's implementation. So good luck on improving this.

I have recognized that - take this directly from the original post:

Quote:The automatic syntax detection is not entirely accurate, as it uses a heuristic algorithm to detect keywords unique to each language - the language with the most keywords wins. Very often you will see the wrong language highlighted, but not all the time. This is still better than only having it highlight PHP.

In the future, I might add a means of manually setting the language in - but for now I've done enough coding on this script.

Code
<?php
echo 'Dec is a fag';

function test()
{
    return 'aids';
}

test();

PHP Code

<?php
echo 'Dec is a fag';

function 
test()
{
    return 
'aids';
}

test(); 

--

Code
//window.location = 'Javascript';
$(document).ready(function()
{
  if (!prompt('u gay bro')) {
    return false;
  }
});

--

Nice work Dec! Even if you did steal my idea :P
--

:)

--

Best form of contact is email: [email protected]


I never stole your idea at all bro - I don't even recall you ever mentioning wanting to code something like this? This is the fruit of my own frustration :P It's still nowhere near perfect though - check the spoiler in Dbof's post. :P
Maybe do detection like with a comment on the first line? When I posted the jQuery, it was recognising it as RUBY until I added the first line.
--

:)

--

Best form of contact is email: [email protected]


This uses jQuery... Dang. I was hoping it would actually be a useable GM script utilizing only Javascript. 😟


(Mar 6, 2013 09:06 AM)CarrotMilk Wrote:  Maybe do detection like with a comment on the first line? When I posted the jQuery, it was recognising it as RUBY until I added the first line.

Or you could just modify it, so we can write (those who use the script):
[code=C++]

Then allow a user to modify the "code box" to follow that particular highlighting scheme?
Is there any such thing as a woman of honor, and sincerity?

https://www.PutItOnMute.com/

4K HDR, WDR time-lapsed truck driving videos!
(Mar 6, 2013 09:08 AM)Irritiable Wrote:  This uses jQuery... Dang. I was hoping it would actually be a useable GM script utilizing only Javascript. 😟



Or you could just modify it, so we can write (those who use the script):
[code=C++]

Then allow a user to modify the "code box" to follow that particular highlighting scheme?

You can use it on GM even though it uses jQuery lol.
--

:)

--

Best form of contact is email: [email protected]


(Mar 6, 2013 09:06 AM)CarrotMilk Wrote:  Maybe do detection like with a comment on the first line? When I posted the jQuery, it was recognising it as RUBY until I added the first line.

That's what I intend to do - but I also intend to improve the algorithm a bit. A lot of people prepend their code blocks with the name of the language (somewhere in their posts), and sometimes the section a post is in can be a big given - I could code up a contributor factor with these facts that if high enough, changes the class on the code block to a more accurate language. That and there are certain things unique to languages that the current algorithm doesn't detect.

(Mar 6, 2013 09:08 AM)Irritiable Wrote:  This uses jQuery... Dang. I was hoping it would actually be a useable GM script utilizing only Javascript. 😟



Or you could just modify it, so we can write (those who use the script):
[code=C++]

Then allow a user to modify the "code box" to follow that particular highlighting scheme?

What's wrong about it using jQuery? Yeah, I get it - jQuery is slow. But not by much. Especially on current technology. And the version of jQuery it uses is hosted on the most favorited CDN - which means you probably already had it cached in your browser before you even installed this script. How does jQuery not make it usable? Also, I'm rather entertained by this post of yours when just yesterday you were arguing with others about your inherent lack of understanding that you should not use deprecated features. You even said it was stable... No, deprecated is not stable. :)

As for modifying it so that you can write [code=C++], that I cannot do. The MyCode isn't stored on the client - all I can work with is HTML, the closest thing would be to do what CarrotMilk suggested above.
Awwh, come on Dec, don't have a go at that guy. He wasn't calling you out on it, just making a comment. You never used to be able to use third-party libs in GM.
--

:)

--

Best form of contact is email: [email protected]


[code=C++]#include <iostream>[/code]

Works fine for me.
Is there any such thing as a woman of honor, and sincerity?

https://www.PutItOnMute.com/

4K HDR, WDR time-lapsed truck driving videos!
The extend button doesn't always work :(
--

:)

--

Best form of contact is email: [email protected]


(Mar 6, 2013 10:35 AM)CarrotMilk Wrote:  The extend button doesn't always work :(

It always works for me - what's the issue?


I've updated the userscript to allow manual syntax highlighting when it isn't smart enough to detect the correct language. This is done in the form of a comment on the first line of the code block with a flag - "this.code.is" followed by the CSS class name the highlighter attributes to the language. For example;

If I wanted to make my code Javascript:

// this.code.is javascript

or maybe CoffeeScript:

# this.code.is coffeescript

And so on.

PHP Code

<?php 
// this.code.is php 
PHP Code

<?php 
// this.code.is javascript 
PHP Code

<?php 
# this.code.is coffeescript 
PHP Code

<?php 
// this.code.is cpp 

Finding the correct class names for your language might be tricky, so if you're unsure - here's a webpage you can visit: http://softwaremaniacs.org/media/soft/hi.../test.html

The green text on the left of each code block is the CSS class for that language.

Also, I've made the names of some of the languages more concise, for example "AVR Assembler" instead of "AVRASM".


Possibly Related Threads...
Thread / Author Replies Views Last Post
by James BurnhamAug 2, 2020 04:47 PM 0 83 Aug 2, 2020 04:47 PM
Last Post: James Burnham
by TʀᴀᴜᴍᴀFeb 17, 2016 06:17 PM 0 77 Feb 17, 2016 06:17 PM
Last Post: Tʀᴀᴜᴍᴀ
by SkidyDec 27, 2015 02:58 PM 2 140 Dec 27, 2015 02:58 PM
Last Post: Skidy