SCF Forum Syntax Highlighter (v 1.5)

[Jim]

This .zip file is a Google Chrome browser extension that automatically applies color highlighting to [ code ] tags in SCF posts. (Does not do indentation.)

Installation

• Download scf_syntax_highliter_1.5.zip below.
• Extract somewhere permanent.
• Open Chrome.
• Open Tools/Extensions.
• Open + Developer mode.
• Click Load Unpacked Extension.
• Browse to extracted folder, click OK.
• Done.

If properly installed, SCF Syntax Highlighter should appear on your Chome Extenions page.

Note: Dan likes the line numbers, I do not because the line numbers are included when the selected code is pasted in an editor. This version has line numbering turned on, so you will need to edit the contentscript.js file and remove the "linenums" word to turn them off. It is possible to add an options dialog to toggle linenums on and off, but I have no plans on adding this feature.

Use

You don't need to do anything - if a SCF page contains embeded [ code ] tags, the code will be automatically highlighted.


History

Initial Release

• Update to Version 1.0
• Renamed to scf_syntax_highlight.zip
• Switched highlight engine to google-code-prettify
• Better colors.
• Auto-detects multiple languages.
• Line numbers.

Version 1.5 - 2012-09-30

* Applied mods from John and Dan.
* Removed unused .js files.
* Removed other extraneous files.


----

[kyyu]

Cool! Tried it on FF and worked as advertised.

[Dan Rathbun]

This doesn't work for IE8 ??

The first example DOES work in IE8 (and I don't even think I have JQuery installed!)

The bummer is we have to do it for each topic. I'd prefer this to be a user settable for the entire SCF site, perhaps via a right-click context menu.

[Jim]

This doesn't work for IE8 ??

Don't use it, didn't try it.

The forum includes jQuery on every page, so using jQuery is the best cross-platform way to do it. I don't know if there is a way to trigger it on a page load, not likely unless it is made into a proper browser add-on.

I wrote a jetpack extension to do this, but it requires people to install a 1.5 MB add-on in FF. Also, I am not sure of the current status of jetpack.

The idea could be taken further by using something like this to do client-side syntax highlighting.

[Dan Rathbun]

This doesn't work for IE8 ??

Don't use it, didn't try it.

I did try it on IE8 and it did work. (hence the Edit above.)

The forum includes jQuery on every page, ...

That explains why the JQuery works then.

[Dan Rathbun]

Wondering...

can we embed a conditional statement within a CSS script ??

MSIE lets us have a user (client-side) css file applied to ALL websites, so if I could something like have:
if window.location contains "forums.sketchucation.com"
then CODE {max-height: auto}

[thomthom]

hm... could one make a bookmarklet to add syntax highlighting...?

[Dan Rathbun]

Finally installed Chrome. WOW so fast !!!!

Installed your extension and it works great.

You mentioned something about indentation. I noticed wrapped lines are out-dented. Is this what you meant?

[Dan Rathbun]

Really weird... Chrome installed here:
"C:\Documents and Settings\Dan\Local Settings\Application Data\Google\Chrome\Application\chrome.exe"
instead of in the Programs path.

Anyone know why?

[Dan Rathbun]

Noticed that the Google Syntax highlighter doesn't colorize the first @ in a module / class @@variable correctly.

Here's another test that fails in some hightlighters, when if and unless are used in modifier position:

Code: Select all

puts("Testing") if @value.empty?

warn("Error!") unless $VERBOSE

(Hey if and unless are coloered correctly!)

Here's another test that fails in some hightlighters, the periods in ranges don't color correctly:

Code: Select all

for index in 0..256
  puts("The value is #{@value[index].to_s}")
end # for

(Looks like the second "dot" is a different color.)

[Dan Rathbun]

I am seeing a warning in my Chrome extensions list, that says support for manifest version 1.0 will be ending.

Ref: http://code.google.com/chrome/extensions/manifestVersion.html

It says extensions need to be updated to use version 2.

[Jim]

I am seeing a warning in my Chrome extensions list, that says support for manifest version 1.0 will be ending.

Ref: http://code.google.com/chrome/extensions/manifestVersion.html

It says extensions need to be updated to use version 2.

Version 2 added.

[Dan Rathbun]

After loading.. the title still says ver "1.0"

Line numbers do not appear, and alternating line shading is off.

[driven]

I noticed this while experimenting on the new site, then tested here,
other than the odd colors, this works without the plugin on mac,
what about on PC's?
john

Code: Select all

# By default, SketchUp automatically loads (using require) all files with
# the .rb extension in the plugins directory.  This function can be used
# to automatically load all .rb files from a different directory also.  to
# use this add a call like the following to a file in the plugins directory
# require_all "MyRubyScripts"
def require_all(dirname)
    begin
        rbfiles = Dir[File.join(dirname, "*.{rb,rbs}")]
        $:.push dirname
        rbfiles.each {|f| Sketchup::require f}
    rescue
        puts "could not load files from #{dirname}"
    end
end

[Krisidious]

A lil OT, I only got here because I thought this might have to do with my alert request.

Yeah Chrome is fast... But it grows and grows... independent process for tabs and who knows what else.

running one instance of each FF, Chrome and IE9 these are the processes I get.

All-Browsers-APV-2.jpg

I think FF is by far the biggest beast of all. I might add I have like 3 plugins going on FF.

[Dan Rathbun]

Fix & bump to v1.4

(The Chrome Extensions panel will give you the path to the extension folder, in your USER local APPDATA path.)

ISSUES:

(1) The forum URL changed after the new site launch, so the manifest.json needed to change:

• "matches" value needed a new url entry for the new site.
• "js" value, needed the ref to "jquery-1.6.2.min.js" removed.

New "manifest.json" file:

Code: Select all

{

    "manifest_version" : 2,
    "name" : "SCF Syntax Highlighter",
        "version" : "1.4",
        "description" : "Formats SketchUcation <code> areas.",
        "content_scripts" : [
        {
            "matches"    : ["http://sketchucation.com/forums/*","http://forums.sketchucation.com/*"],
            "js"         : ["google-code-prettify/prettify.js", "contentscript.js"],
            "css"        : ["google-code-prettify/prettify.css"],
            "run_at"     : "document_idle",
            "all_frames" : false
        }
    ]
}


(2) As John said the Jquery needed to be replaced in "contentscript.js":

old "contentscript.js" file:

Code: Select all

//$("#p").hide();
//$("#page-body div p").hide();
//$("#page-body img").hide();
$("code").parent().parent().parent().css("width","100%");
$("code").css("max-height", "800px");
$("code").addClass("prettyprint");
// $("code").addClass("linenums");
prettyPrint();
//$("code").css("border", "1px solid blue");
chrome.extension.sendRequest({}, function(response) {});


new "contentscript.js" file:

Code: Select all

//
// SCF [code] Google Syntax Highlighter v1.4+
//

x=document.getElementsByTagName('code');
var newatt;
for (i=0;i<x.length;i++)
{
  newatt=document.createAttribute("class");
  newatt.value="prettyprint linenums"; 
  x[i].setAttributeNode(newatt);
}

prettyPrint();

chrome.extension.sendRequest({}, function(response) {});


Reload from the Chrome Extensions panel, after making changes.
Refresh any pages with code blocks.

[Jim]

Thanks much to John and Dan - I have updated the .zip in the first post with your fixes, and simplified the structure.

[Dan Rathbun]

Note: Dan likes the line numbers, I do not because the line numbers are included when the selected code is pasted in an editor.

That's news to me.. because it does not happen to me!

I usually use the SELECT ALL button at the top of the codebox.

Do you mean if you are copying the whole post ??

[driven]

@Jim,
how about changing the topic title to just SFC_Forum_SyntaxHighlighter and include other browser versions in your top post.
I've done a 'GreaseKit' which works for most 'WebKit' Browsers including 'webDialog'.
and a Safari Extension both based on 'google-code-prettify'
FireFox should be easy...

john

[driven]

Wondering...

can we embed a conditional statement within a CSS script ??

MSIE lets us have a user (client-side) css file applied to ALL websites, so if I could something like have:
if window.location contains "forums.sketchucation.com"
then CODE {max-height: auto}

I know this post is old, but to get this to work as a Safari Extension,
I had to 'apply to all' then 'whitelist' the forum then 'blacklist all'.

On safari the 'whitelist' has precedence over the 'blacklist', so only the forum gets the highlighting...

maybe IE has something similar?

john

[Dan Rathbun]

@Jim, how about changing the topic title to just SFC_Forum_SyntaxHighlighter and include other browser versions in your top post.

A one-stop shop ?