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

自分で実装するのではなく、その機能をサポートする別のライブラリを検討することをお勧めします。この記事では、 SyntaxHighlighterbeautyOfCodeのような未加工のコードを表示する構文ハイライターを見つけることができます

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

于 2012-10-14T12:59:30.327 に答える