NEW Markup Plugin: dp.SyntaxHighlighter

[Brendon K]

I've finally created a competitor for GeSHi in code highlighting (this is client-side based as opposed to server-side). I've been modifying templates to do this work for far too long, and finally decided to create a plugin (the smart thing to do). I'd like to release it for everyone to use, but would like others to test it out beforehand, if at all possible, to debug any remaining CSS/Theme compatibility issues.

Read my blog entry for more...

Any questions, comments, or critiques are welcomed, and encouraged! This is my first plugin, so I really still have no idea what I'm doing inside the plugin class code.

Things left to do: Add better descriptive text of the plugin's purpose, and at a later date, allow the administrator to choose which language files to allow rendering for (i.e.: which JS files to be loaded in the body).

REQUIREMENT: The theme(s) being tested MUST support the following two hooks:
- frontend_header
- frontend_footer

[judebert]

A very interesting idea. I'm not putting any code on my pages... yet. But I'll be using this when I do!

Any way to fix the "name" problem?

[Brendon K]

Thanks for the feedback, judebert. Hopefully I posted this information in the right sub-forum, I'm always confused where certain information should go as most people don't follow the proper guidelines anyway. It's scary to think something might go unseen.

I've updated my blog post with some usage information, and a short example of how the script looks/works. I can't believe I didn't do that in the first place.

As far as the "name" problem is concerned. "Could it be done?" Yes. "Should it be done?" I'm not so sure about that. Although I could most likely modify the original package to work differently so that standards compliancy would be left intact, it would end up resulting in a (very) minor fork of the original author's script, which would make upkeep more difficult (not much, but enough to cause problems if any old Joe wanted to update their version if I was too slow to do so). I'd much prefer to convince the author to make changes to the core JS codes to allow for compliancy. I don't know how easy convincing him to make changes would be, however.

As for the CSS modifications I made to the original package, I've posted those changes back to the Google Code project's Issue Tracker, so hopefully he'll take some, if not all, of the suggested changes there. Maybe I can work on getting the core JS files to also work differently and be standards compliant.

...anyone else have any comments, questions, or critiques?


My own suggestion:
Get it to work in the Administrator's Preview page.

[Brendon K]

*yawn*

Long week or two...it only took a few seconds to make the change to get it to work in the Administrative view, thanks to Garvin's explanations. This plugin is ready for Spartacus deployment (I believe, obviously Garvin and other developers would have to OK it).

The download can (currently) be found at my site as a zip file.

All tabs have been converted to 4 spaces. It's a fairly straightforward plugin, and I believe it may rival anything else for its simplicity.

[garvinhicking]

Hi!

Great work

Committed to Spartacus!

Regards,
Garvin

[Brendon K]

Thanks, Garvin!

[d_cee]

Hi

nice work with the plugin, looks great and I particlarly like being able to style the output. Is it possible for you to make it look in the template folder before it looks in the plugin directory for the syntax_highlighter.css file?

I've not changed anything in your files and there's a small problem with the output as you'll see from the image. It's not picked up the first few css declarations and then it only highlights the first 7 characters of each id or class.



cheers

Dave

[Brendon K]

Dave, the underlying code is not of my creation, I can only claim responsibility for the plugin, and a modification to the default CSS style used for the PRE or TEXTAREA box (i.e.: the numbered list and alternating colors), however - each language being displayed can override the default CSS display (want alternating dark colors for the code lines?). You can find (and upgrade if I don't get around to it quick enough) the original project at:
http://code.google.com/p/syntaxhighlighter/

Regardless, this means that there's a bug in the parsing of the shBrushCss.js file. It's detecting anything with a hash symbol (#) as a hex color value, thus why only 7 characters are being colored. Since a hex character code can also be represented by 3 characters after the symbol, it looks like that whole parsing needs to be recoded.

I'm not completely familiar with JavaScript regular expressions, but I can try to take a look.

As far as the "point to the CSS in the templates directory before the plugin directory", that would not solve this issue as it must call the specific language parsing file. In all honesty, I don't know why you'd want to do that anyway, unless you were to create your own highlighter CSS, but at that point you've modified the plugin and will also have to modify your template - most users would not be doing this.

I apologize for taking so long to respond. I've now subscribed to this topic in case there are further replies.

[Oliver]

REQUIREMENT: The theme(s) being tested MUST support the following two hooks:
- frontend_header
- frontend_footer

Hmmm... how can I check this, please? This plugin works for me, when i chose default-template, but it does not work when I chose a selfmade theme

Here's a post where I use your (great) plugin: The post is written in german

[Brendon K]

I think it's rather Interesting that someone is able to create a theme yet still not know all the plugin hooks. I haven't tried my hand at creating a theme, so I wouldn't know where to begin!

Looking at the default theme bundled in v1.1.2, here are some code snippets from the index.tpl (the only file this is required for):

Code: Select all

<head>
    <title>{$head_title|@default:$blogTitle} {if $head_subtitle} - {$head_subtitle}{/if}</title>
    <meta http-equiv="Content-Type" content="text/html; charset={$head_charset}" />
    <meta name="Powered-By" content="Serendipity v.{$head_version}" />
    <link rel="stylesheet" type="text/css" href="{$head_link_stylesheet}" />
    <link rel="alternate"  type="application/rss+xml" title="{$blogTitle} RSS feed" href="{$serendipityBaseURL}{$serendipityRewritePrefix}feeds/index.rss2" />
    <link rel="alternate"  type="application/x.atom+xml"  title="{$blogTitle} Atom feed"  href="{$serendipityBaseURL}{$serendipityRewritePrefix}feeds/atom.xml" />
{if $entry_id}
    <link rel="pingback" href="{$serendipityBaseURL}comment.php?type=pingback&entry_id={$entry_id}" />
{/if}

{serendipity_hookPlugin hook="frontend_header"}
</head>

...and further down the page...

Code: Select all

{serendipity_hookPlugin hook="frontend_footer"}
{if $is_embedded != true}
</body>
</html>

frontend_footer is usually placed about as low in the document template as possible. frontend_header is placed somewhere in the HEAD of the template.

Was this helpful? I apologize for not knowing German, or any other language for that matter.

If you want to be able to preview your posts in the administrative section, the custom administrative template must also support the backend_preview hook. I hope you enjoy the plugin!

[Oliver]

I think it's rather Interesting that someone is able to create a theme yet still not know all the plugin hooks. I haven't tried my hand at creating a theme, so I wouldn't know where to begin!

All my themes are based on an old Version of the default-template. So I just copied the hooks so that it looked ok

Looking at the default theme bundled in v1.1.2, here are some code snippets from the index.tpl (the only file this is required for):

[...]

...and further down the page...


[...]


frontend_footer is usually placed about as low in the document template as possible. frontend_header is placed somewhere in the HEAD of the template.

Was this helpful? I apologize for not knowing German, or any other language for that matter.

I found these hooks, I placed them into my template when I 'build' it. I think it's just a problem with some other scripts/css-Files I placed into (?) the header. But thanks, I'll look, if I can change ist

If you want to be able to preview your posts in the administrative section, the custom administrative template must also support the backend_preview hook. I hope you enjoy the plugin!

The backend-preview works great *g*

[Brendon K]

I took a quick look at the source code of your rendered blog. It seems that the frontend_header is being called properly (I see you also use the Lightbox plugin of which I based the code for my plugin), it's the frontend_footer that isn't being called/executed in the template as it should be.

I tried to find an example of how to properly call the hook in the documentation on this site, but was unable to find anything. I think you might just have to keep testing on your theme, I don't have a better answer. Good luck!


FYI - For everyone:
dp.SyntaxHighlighter (not the plugin, but the code base behind it) does have known bugs, to see what they are (even what I've discussed), please visit the issue tracker for the project to report your own, or see if something's already been discussed. I'm sure it'll help out the author of the project. I'll still try to take a look at that CSS issue though.

[Oliver]

I took a quick look at the source code of your rendered blog. It seems that the frontend_header is being called properly (I see you also use the Lightbox plugin of which I based the code for my plugin), it's the frontend_footer that isn't being called/executed in the template as it should be.

YES you're right! Instead of

Code: Select all

{serendipity_hookPlugin hook="frontend_footer"}

I used

Code: Select all

{serendipity_hookPlugin hook="entries_footer"}

(don't know why). Now I corrected (?) the hook and it works.

Thank you

[Brendon K]

I took WAY too long to update this. The original test upgrade went so well that I had forgotten I was indeed running an updated version. Oops!

The new script can be found at the same URL as the original:
dp.SyntaxHighlighter Plugin for s9y

Updates:
- Version number now corresponds to the actual JS script this is running instead of the version of the plugin - this should make it easier for people to know if they're running an older or up-to-date version.

- Descriptive text updated. I'm no longer running a modified version of the CSS. Alex Gorbechev took most of my suggestions from the bug tracker and fixed up his CSS.

- Author information now gives initial credit to Alex Gorbechev (core) and then me (plugin)

- The descriptive text now tells people that the theme requires the frontend_header, frontend_footer[/b], and optionally the backend_preview hooks to work.

[garvinhicking]

Hi!

Hehe. Many thanks for telling us, I've just committed your updates!

Regards,
Garvin