Question

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

在我的博客中，我想为用户添加一个选项，当他点击一个名为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 post中看到。

Answer 1

这样的事情，显然是从按钮改变它，有更好的定位和元素定位，并使用实际版本的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;
};

Answer 2

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

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

如何在文本框中添加“view：source”选项？

2 个答案: