visoft / goodbye-syntax-highlighter

Wordpress plugin that converts SyntaxHighlighter code example syntax into syntax that works out-of-the-box with highlight.js
4 stars 2 forks source link

<pre lang="bash"> doesn´t work with GSH :( #1

Closed controlcde closed 11 years ago

controlcde commented 11 years ago

Hi,

I´ve tagged all my code into my wordpress blog with

< "pre lang="bash"" >...< "/pre" >

and after activation your plugin nothing happens with the code. Do you could fix this?

Bye, Michael

visoft commented 11 years ago

<pre lang="*">...</pre> isn't the pattern it is looking for, it sniffs out the following:

<pre class="brush: bash;">
    gem uninstall json
    gem install json --platform=ruby -v 1.4.6
</pre>

SyntaxHighligher doesn't use <pre lang="*"> as far as I know, just the <pre class="brush:*"> syntax.

controlcde commented 11 years ago

Thats right - I´ve choosen the Plugin http://wordpress.org/extend/plugins/wp-syntax/ formerly. Is it a grest problem to include an upgrade from WP-Syntax to GSH? I would be grateful.

visoft commented 11 years ago

Sure, that would be possible, though I'm not familiar with the languages that are supported.

Do you think it should be something rolled into GSH or should I start a new plugin, e.g. goodbye-wp-syntax?

controlcde commented 11 years ago

I think it would be nice if GSH will be replace all Syntax Highlight WP-Plugins :). WP-Syntax supports all GeSHi-Languages (http://qbnz.com/highlighter/).

visoft commented 11 years ago

My only thought on a separate project is that GeSHi supports a ton of languages (as does highlight.js), and the language name doesn't always match up (e.g. csharp --> cs, though that is the same for GeSHi and SH to highlight.js). Having a separate plugin could help to keep the mappings clean. That said, I guess you are right; it would be nice to just have one project.

I suppose the <pre lang="XXX"> pattern isn't that far off from <pre class="brush: XXX;">. It probably would just be safe to look for both patterns out of the gate, and then add any enhancements that may arise from that change. I won't go deep into mappings for the first release (as I didn't even do that for SH), but it should be a good start.

visoft commented 11 years ago

Ok, initial version is checked in. Give it a try. I tested a couple of snippets and it seems to work as expected, but I'd like you to try it on your blog. If you say everything looks good, I'll release it.

visoft commented 11 years ago

@controlcde, have you had a chance to try out the plugin?

controlcde commented 11 years ago

Well, I´m busy right now but I´ve to give a little tests. All in all: It works - i think so.

But I´ve some notes:

  1. Is it right, that I´ve to install wp-highlight.js before GSH will working?
  2. The resulting code doesn´t look like SyntaxHighlighter :(. No line numbers, no highlighting.
  3. Maybe I´m using a special typo but it seams so that GSH can´t detect the ending tag. And if I write
     .... 

    Some text and than more

     .... 

    The text between will not shown in the same style like text before the block.

controlcde commented 11 years ago

If you could give me a hint how I could insert my code (more than one line) into this comment field without interpretation of GFM I will do this :)

visoft commented 11 years ago
  1. You are correct, you need wp-highlight.js to be installed. That will convert the <pre><code> blocks into formatted code. You don't need the wp-highlight plugin specifically, you could just use your own implementation using hightlight.js directly.
  2. hightlight.js doesn't support line numbers, nor line highlighting. You can read more about it in the docs. There is a branch that supports line numbers, but I haven't tried it out, plus GSH currently just strips that stuff out when outputting the new code blocks.
  3. Not sure what you mean... To get code to be inserted you can either indent each line by 4 spaces or use a block that starts with ``` LANGUAGE and ends with the three back-ticks. You can see an example of this by clicking the GFM link that is at the top of the comment editor, or on this page.
controlcde commented 11 years ago

thanks, and to 3. I hope now you could see my example :)

<pre class="brush: bash">
echo "#!/bin/bash" &gt; /usr/local/bin/mute-on.sh
echo "osascript -e 'set volume with output muted'" &gt;&gt; /usr/local/bin/mute-on.sh
echo "#!/bin/bash" &gt; /usr/local/bin/mute-on.sh
echo "osascript -e 'set volume with output muted'" &gt;&gt; /usr/local/bin/mute-on.sh
</pre>
Then more text
<pre class="brush: bash">
sudo chmod u+x /usr/local/bin/mute-on.sh
sudo chmod u+x /usr/local/bin/mute-off.sh
</pre>
and some more text
<pre class="brush: bash">
defaults read com.apple.loginwindow LoginHook
defaults read com.apple.loginwindow LogoutHook
</pre>
finally: text
<pre class="brush: bash;">
defaults write com.apple.loginwindow LogoutHook /usr/local/bin/mute-on.sh
defaults write com.apple.loginwindow LoginHook /usr/local/bin/mute-off.sh
</pre>

I think it´s a strange behavior, isn´t it?!

visoft commented 11 years ago

First, you are missing a semicolon after your brush declaration in the first 2 <pre> tags.

That said, this is a problem. I modified the regular expression so it grabs everything between the <pre> and the last </pre> (e.g. (.*)). That doesn't work. I originally had it picking up everything except the start of a tag (e.g ([^<]*)), but that causes other problems like not capturing HTML code snippets.

Do you have any ideas? I was thinking of capturing everything between the <pre> and </pre> except for a nested </pre>, but I'm struggling with the regular expression to do that.

visoft commented 11 years ago

Try the latest version. I'm not 100% satisfied with the regular expression that I wrote. It requires line breaks after the <pre...> and before the </pre>. It should pick up tags now and your example should work.

visoft commented 11 years ago

I rolled the regular expression back to what was originally there ([^<]*).

XML/HTML inside a <pre> block should really be escaped, so the old expression seems to work as expected.