0

The triple backticks in markdown render as <pre><code class="...">...</code></pre>. More specifically, 

# in markdown
```java

```

# render as 
<pre>
<code class="java">
...
</code>
</pre>

# my expecting result (for Google code prettify):
<pre class="prettyprint linenums lang-java">
...
</pre>

My current solution is to add the following code but it doesn't work.

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=son-of-obsidian></script>

 <script type="text/javascript">
 jQuery(document).ready(function () {
     $('pre code').each(function() {
         var code = $(this).html();
         var lang = $(this).attr('class');
         if (lang) {
             $(this).parent().attr('class', 'prettyprint linenums lang-'+lang).html(code);
         }
     });
     prettyPrint();
 });
 </script>

How do I remove <code class="...">...</code>?

I used SyntaxHighlighter <pre class="brush: java">...</pre> to highlighter my code blocks in WordPress + Windows Live Writer + PreCode(based on SyntaxHighlighter).

Currently, I turn to markdown. To insert a code blocks in markdown, I use

```java
code here
```

# OR

<pre class="brush: java">
code here
</pre>

Both of them doesn't work for me, because SyntaxHighlighter requires all left angle brackets inside <pre></pre> should be HTML entries escaped.

Therefore, I install Google code prettify but encounter the above issue (incompatiable).

SparkAndShine
  • 17,001
  • 22
  • 90
  • 134
  • Are you sure that's the only solution, StackOverflow also uses google-code-prettify for its code blocks and has `` blocks inside the `
     `, look at your browser page inspector to see it in action on your post
     – Ferrybig Jan 21 '16 at 15:21
  • @Ferrybig I didn't mean this is the only option. Using `
    ...
    ` is not compatible with my previous code blocks which is formatted by SyntaxHighlighter.     – SparkAndShine Jan 21 '16 at 15:26
  • I am not sure what are you asking for? could you be more specific? – Luis González Jan 21 '16 at 15:30
  • @LuisGonzález please check the edited question. – SparkAndShine Jan 21 '16 at 15:49

2 Answers2

1

Try the below out and let me know if this works for you. 

$('pre').each(function() {
     var el = $(this).find('code');
     var code = el.html();
     var lang = el.attr('class');
     if (lang) {
         $(this).addClass('prettyprint linenums lang-' + lang).html(code);
     }
 });

JSFiddle Demo

ChronixPsyc
  • 478
  • 1
  • 8
  • 22
  • thx. encounter `Uncaught TypeError: $ is not a function`. What are the differences between `jQuery` and `$`? – SparkAndShine Jan 21 '16 at 15:32
  • @SparkandShine they should mean the same thing, `$` is a valid variable name, like `jQuery` is, it is weird that it doesn't work correctly or you – Ferrybig Jan 21 '16 at 15:45
  • @Ferrybig because of missing `xregExp` in my site? I replace all `$` with `jQuery` and it still doesn't work for `TypeError: n.ajax.request is not a function`. – SparkAndShine Jan 21 '16 at 15:58
  • @ChronixPsyc it works though encounter `TypeError: n.ajax.request is not a function` – SparkAndShine Jan 21 '16 at 16:03
  • 1
    @SparkandShine I have just run this on a blank HTML page that contains only `pre`, `code`, `jQuery` and the code above and works fine for me so there may be other errors in your code that relate to the ajax error stated above. There are also no errors being thrown in the JSFiddle – ChronixPsyc Jan 21 '16 at 16:29
  • @ChronixPsyc now it works. This issue is probably caused by cache. thx again. – SparkAndShine Jan 21 '16 at 16:34
1

You are forgetting to remove the original code object from the pre element, causing the code to be duplicated. You should call $(this).remove(); to remove the old code object.

Ferrybig
  • 18,194
  • 6
  • 57
  • 79