Как удалить `‹code›‹/code›` из `‹pre›‹/pre›` с помощью javascript?

Тройные обратные кавычки в уценке отображаются как <pre><code class="...">...</code></pre>. В частности,

# 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>

Мое текущее решение состоит в том, чтобы добавить следующий код, но он не работает.

<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>

Как удалить <code class="...">...</code>?

Я использовал SyntaxHighlighter <pre class="brush: java">...</pre> для выделения блоков кода в WordPress + Windows Live Writer + PreCode (на основе SyntaxHighlighter).

В настоящее время я перехожу к уценке. Чтобы вставить блоки кода в уценку, я использую

```java
code here
```

# OR

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

Оба они не работают для меня, потому что SyntaxHighlighter требует, чтобы все левые угловые скобки внутри <pre></pre> были экранированы записями HTML.

Поэтому я устанавливаю код Google prettify, но сталкиваюсь с указанной выше проблемой (несовместимо).


javascript google-code-prettify
person SparkAndShine    schedule 21.01.2016    source источник
comment
Вы уверены, что это единственное решение? StackOverflow также использует google-code-prettify для своих блоков кода и имеет блоки <code> внутри <pre> , посмотрите в инспекторе страниц браузера, чтобы увидеть его в действии в своем сообщении.   -  person Ferrybig    schedule 21.01.2016
comment
@Ferrybig Я не имел в виду, что это единственный вариант. Использование <pre><code class="...">...</code></pre> несовместимо с моими предыдущими блоками кода, отформатированными SyntaxHighlighter.   -  person SparkAndShine    schedule 21.01.2016
comment
Я не уверен, что вы просите? Не могли бы вы быть более конкретным?   -  person Luis González    schedule 21.01.2016
comment
@LuisGonzález, пожалуйста, проверьте отредактированный вопрос.   -  person SparkAndShine    schedule 21.01.2016

Ответы (2)


arrow_upward
1
arrow_downward

Попробуйте следующее и дайте мне знать, если это работает для вас.

$('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

person ChronixPsyc    schedule 21.01.2016
comment
Спасибо. встретить Uncaught TypeError: $ is not a function. В чем разница между jQuery и $? - person SparkAndShine; 21.01.2016
comment
@SparkandShine они должны означать одно и то же, $ - допустимое имя переменной, например jQuery, странно, что оно работает неправильно, или вы - person Ferrybig; 21.01.2016
comment
@Ferrybig из-за отсутствия xregExp на моем сайте? Я заменил все $ на jQuery, и это все еще не работает для TypeError: n.ajax.request is not a function. - person SparkAndShine; 21.01.2016
comment
@ChronixPsyc работает, хотя встречается TypeError: n.ajax.request is not a function - person SparkAndShine; 21.01.2016
comment
@SparkandShine Я только что запустил это на пустой HTML-странице, которая содержит только pre, code, jQuery и приведенный выше код, и у меня работает нормально, поэтому в вашем коде могут быть другие ошибки, связанные с ошибкой ajax, указанной выше. В JSFiddle также нет ошибок. - person ChronixPsyc; 21.01.2016
comment
@ChronixPsyc теперь работает. Эта проблема, вероятно, вызвана кешем. спасибо еще раз. - person SparkAndShine; 21.01.2016

arrow_upward
1
arrow_downward

Вы забываете удалить исходный объект кода из элемента pre, что приводит к дублированию кода. Вы должны вызвать $(this).remove();, чтобы удалить старый объект кода.

person Ferrybig    schedule 21.01.2016
comment
Спасибо. Не могли бы вы прикрепить полный код? Я совсем новичок в javascript. - person SparkAndShine; 21.01.2016