0

我知道我的标题不是那么具有描述性，所以让我在这里尝试解释一下。

在我的博客中，我想为用户添加一个选项，当他单击一个名为的小按钮时，view:source他会在raw format. 我正在使用prettify.js语法突出显示，它会自动在我的源代码周围创建一个文本框，其中包含以下定义的 css：

pre.prettyprint { 
    border-style: groove; 
    border-radius: 10px; 
    padding: 10px; 
    overflow: auto;
    font-family: "DejaVu Sans Mono";
    font-size: 12px;
    background-color: #EBECE4
}

现在，在那个类似文本框的结构中，我只想添加一个选项/按钮来查看原始格式的源代码。我正在谈论的功能可以在这个 dzone 帖子中看到。

4

2 回答 2

3

像这样的东西呢，显然是从一个按钮改变它，有更好的定位和元素定位，并使用 prettify.js 的实际版本而不仅仅是输出：

演示：http: //jsfiddle.net/SO_AMK/9YXxP/

JavaScript：

var code = document.getElementsByTagName("pre")[0].innerText;

var elm = document.getElementById("clickmeforpopup");

elm.onclick = function() {
    popup = window.open("", "popup");
    popup.document.body.innerText = code;
};​
于 2012-10-14T14:02:48.363 回答
1

您可能需要考虑另一个支持该功能的库，而不是自己实现它。在本文中，您可以找到显示原始代码的语法荧光笔，例如SyntaxHighlighter或beautyOfCode

http://www.webdesignbooth.com/9-useful-javascript-syntax-highlighting-scripts/

于 2012-10-14T12:59:30.327 回答