crayon-syntax-highlighter
crayon-syntax-highlighter copied to clipboard
aramk
Code rendered by WP Jetpack Markdown is incorrectly rendered
Code blocks rendered by the Markdown parser that comes with Jetpack has some additional tags added to it as shown in the screenshot.
I have no other syntax highlighting plugin enabled at the time this bug occurred. My raw code block looks like this:
```xml
<Target Name="BowerInstall" BeforeTargets="PrepareForBuild">
<Exec Command=".bin\bower install" />
</Target>
<Target Name="NpmBuild" BeforeTargets="GruntBuild">
<Exec Command=".bin\npm install" />
</Target>
<Target Name="GruntBuild" AfterTargets="BowerInstall">
<Exec Command=".bin\grunt" />
</Target>
```
This is likely a result of interference - those Crayon placeholder tags are captured by the markdown plugin before Crayon has a chance to modify them to the generated code.
I know this is an old issue but I have been looking for solutions to the same, and I hope the extra information below can help sort it out.
When you use JetPack, it writes a <pre>, and then writes a <code> inside it.
It allows you to add CSS classes (the right syntax I imagine would be .lang:xhtml not .xml, because crayon needs the lang: part and doesn't include a value for xml). But the CSS classes you add using the special Markdown syntax get added to the <code> tag, not the <pre>.
Crayon can handle <pre>, and can handle <code> individually, but it gets confused when it sees both.
This makes the plugin work fine with the generic highlighting, but you cannot pass the lang from Markdown (except using the "crayon" button in the editor, which writes HTML; not very useful if you write in an external Markdown editor and paste to WordPress only before publishing).
@aramk, what do you think?
As always: Thanks a lot for Crayon. It's pure awesomeness.
I still had issues with markdown code boxes showing up in Crayon with an extra space at the end, even with trim spaces option. Is it possible that trimming whitespace is done before removing <code> tag. resulting in a new line being left behind.
Regardless, I have decided to get around this by doing a find and replace on code fences. Specifically, I do a regex capture/replacement on (.*?) and replace it with [crayon]\1[/crayon].
