1

ライブ スタイル ガイドの文字列として渡されたコード スニペットを強調表示して書式設定する方法を探しています。私はhighlighjsとprettifyで遊んでいます。それらは非常に便利で簡単に強調表示できますが、フォーマットする方法や、実際にフォーマットできるかどうかがわかりません。

フォーマットとは、コードを読みやすくするためのタブと改行を意味します。スタイル ガイドに使用しているダスト テンプレートの出力を自動化するには、コードを文字列として渡す必要があります。

つまり、渡したい：

"<table><tr><td class="title">Name</td><td class="title">Category</td><td class="title">Results</td></tr></table>"

そして、次のようなものを取得します。

<table>
        <tr>
            <td class="title">Name</td>
            <td class="title">Category</td>
            <td class="title">Results</td>
        </tr>
</table>

これを達成する方法についてのアイデアはありますか? ありがとう！

4

1 に答える 1

0

これを HTML として DOM に解析し、すべての要素をトラバースして書き出し、反復ごとにインデントすることができます。

このコードは仕事をします。安心してご利用いただき、確実に改善してください。バージョン 0.0.0.1 です。

var htmlString = '<table><tr><td class="title">Name</td><td class="title">Category</td><td class="title">Results</td></tr></table>';

//create a containing element to parse the DOM.
var documentDOM = document.createElement("div");
//append the html to the DOM element.
documentDOM.insertAdjacentHTML('afterbegin', htmlString);

//create a special HTML element, this shows html as normal text.
var documentDOMConsole = document.createElement("xmp");
documentDOMConsole.style.display = "block";

//append the code display block.
document.body.appendChild(documentDOMConsole);

function indentor(multiplier)
{
    //indentor handles the indenting. The multiplier adds \t (tab) to the string per multiplication.
    var indentor = "";
    for (var i = 0; i < multiplier; ++i)
    {
        indentor += "\t";
    }
    return indentor;
}

function recursiveWalker(element, indent)
{
    //recursiveWalker walks through the called DOM recursively.
    var elementLength = element.children.length; //get the length of the children in the parent element.

    //iterate over all children.
    for (var i = 0; i < elementLength; ++i)
    {
        var indenting = indentor(indent); //set indenting for this iteration. Starts with 1.
        var elements = element.children[i].outerHTML.match(/<[^>]*>/g); //retrieve the various tags in the outerHTML.
        var elementTag = elements[0]; //this will be opening tag of this element including all attributes.
        var elementEndTag = elements[elements.length-1]; //get the last tag.

        //write the opening tag with proper indenting to the console. end with new line \n
        documentDOMConsole.innerHTML += indenting + elementTag + "\n"; 

        //get the innerText of the top element, not the childs using the function getElementText
        var elementText = getElementText(element.children[i]);

        //if the texts length is greater than 0 put the text on the page, else skip.
        if (elementText.length > 0)
        {
            //indent the text one more tab, end with new line.
            documentDOMConsole.innerHTML += (indenting + indentor(1) ) + elementText+ "\n";
        }

        if (element.children[i].children.length > 0)
        {
            //when the element has children call function recursiveWalker.
            recursiveWalker(element.children[i], (indent+1));
        }

        //if the start tag matches the end tag, write the end tag to the console.
        if ("<"+element.children[i].nodeName.toLowerCase()+">" == elementEndTag.replace(/\//, ""))
        {
            documentDOMConsole.innerHTML += indenting + elementEndTag + "\n";
        }
    }
}

function getElementText(el)
{
        child = el.firstChild,
        texts = [];

    while (child) {
        if (child.nodeType == 3) {
            texts.push(child.data);
        }
        child = child.nextSibling;
    }

    return texts.join("");
}

    recursiveWalker(documentDOM, 1);

http://jsfiddle.net/f2L82m8h/

于 2015-01-02T21:37:00.493 に答える