Вызывая prettyPrintOne, вы по существу обходите инициализацию на основе классов. Этот метод имеет аргументы, которые сообщают prettify, как вести себя.
Вы пытаетесь изменить, как prettify ведет себя с классами, но prettify игнорирует это, потому что он заботится только о аргументах, которые являются нулевыми, поэтому они возвращаются к внутренним значениям по умолчанию.
См. Источник, документирующий метод:
/**
* Pretty print a chunk of code.
* @param {string} sourceCodeHtml The HTML to pretty print.
* @param {string} opt_langExtension The language name to use.
* Typically, a filename extension like 'cpp' or 'java'.
* @param {number|boolean} opt_numberLines True to number lines,
* or the 1-indexed number of the first line in sourceCodeHtml.
* @return {string} code as html, but prettier
*/
prettyPrintOne по сути для анализа некоторого кода, переданного ему в виде строки, и возврата результата с параметрами, контролируемыми этими аргументами , И наоборот, prettyPrint будет проходить через DOM в поисках добавляемых вами классов и вести себя в соответствии с найденными классами. Поскольку вы хотите переключаться, вы должны будете продолжать использовать prettyPrintOne, чтобы мы могли контролировать, когда показывать предварительно подтвержденный вывод, а когда показывать оригинал - подробнее об этом позже.
В качестве отступления вы говорите prettify в формате JS, когда у вас есть HTML, включая JS в тегах скрипта и CSS в тегах стиля. Таким образом, вы захотите использовать HTML в качестве расширения lang, а не JS.
В любом случае, все, что вам нужно сделать, это настроить ваш вызов на следующее, дополнительно добавив класс prettify исключительно так Ваша тема прертификации CSS применяется:
$("#pre").html( PR.prettyPrintOne($("#pre").html(), "html", true) )
.addClass("prettyprint");
Et voila:
Что касается переключения, вам просто нужно настроить логика c, так что вы сохраняете оригинал HTML где-то при предварительном кодировании и восстанавливаете его при следующем нажатии кнопки:
$("#button").on("click", function() {
// Cache jquery object
var $pre = $("#pre");
// If the element has a prettyprint class, it's already been manually
// prettified
if (!$pre.hasClass("prettyprint")) {
// Element hasn't been prettified, store the html in jQuery data
$pre.data("original-html", $pre.html());
// Manually prettify
$pre.html(PR.prettyPrintOne($pre.html(), "html", true))
.addClass("prettyprint");
} else {
// Element has been prettified, restore the orginal html stored in jQuery
// data and remove the prettyprint class, back to where we started
$pre.html($pre.data("original-html"))
.removeClass("prettyprint");
// Remove the jQuery data entry for our original HTML, so next time we
// start fresh
$pre.data("original-html", null);
}
});
Вот jsfiddle, показывающий, что в действии: https://jsfiddle.net/joshdavenport/68thqus1/27/