How do I "codify" and "beautify" code?

Question

I've created some javascript code that will change code into text (codify), so people can copy and paste the code displayed. What I'm wondering, is how do I beautify the code itself (enable block levels, indentation, etc)?

Javascript thus far:

$(".codify").each(function(){
    var text = $(this).html();
    $(this).html(text.replace('<', '&lt;').replace('>', '&gt;').replace("/","&#47;").replace("/n", "<br />")); 
});

Just use html `
` tag ;) Or use ` ` for spaces, and (look it up) for tabs — giorgio, Oct 07 '15 at 16:20
I think the only issue is that now any empty space will be shown. Is there a way to not have that? — Majo0od, Oct 07 '15 at 16:23
ah but then you not only want to codify, but also beautify the code? In that case you should write a kind of parser which is aware of block levels etc. But that's a bit out of the scope of your question. — giorgio, Oct 07 '15 at 16:25
I will, and wow, people here are brutal. Already a down vote and 2 close votes! — Majo0od, Oct 07 '15 at 16:27
Yeah, well, your question is a bit too broad. As of now, the only possibility to help you is to write a guide how to write a parser. If you'll elaborate a bit more, and write a more specific question with a specific problem you'll get a lot of help though. First start on the design of your parser, then show what you've done and come back if you've found a hurdle you can't take. You'll be surprised how kind the people here actually are ;) — giorgio, Oct 07 '15 at 16:32
See, all of that could have been said before hand before I got those two votes and downvotes. I thought my question was specific enough, but apparently it isn't. I don't know how to even approach this. And yes, I've done a google search and tried to find helpful articles, but now I actually know the jargon (codify & beautify). Now I should be able to find something that will lead me to writing something myself (instead of taking a plugin) — Majo0od, Oct 07 '15 at 16:34
@Majo0od please understand that votes are not just about your issues but also a measure of future usefulness of a question for others with similar problems. If it is very localized it may have little use for future searches. Also your question is far too broad — charlietfl, Oct 07 '15 at 16:37
that seems like a terrible reason to down vote a person's question, especially because I really want to learn, and can't find anything out there about this. So I'm not going to get an answer (and get down votes too) because people will feel like it's not what others will want to read? Well that's awful. Anyway, I'm getting rid of this question. — Majo0od, Oct 07 '15 at 16:38
search for syntax highlighter scripts..that's what you really want to make it nice and readable — charlietfl, Oct 07 '15 at 16:39

score 2 · Accepted Answer · edited May 23 '17 at 12:14

normally we use a javascript plugin for it, and you can find so many questions regarding this subject in StackOverflow, like this and this.

But the idea is, as you can't use a normal textarea to color the code as that element does not support coloring, so the idea is having a <textarea> to input the code and then present the parsed code in a <div>.

One of the libraries I've used in the past is http://jsBeautifier.org/

you can test it there and use the library in your application like (and using the default options, cause there's a "million" of them):

var txt = $("textarea").val(),
    output = js_beautify(txt);

$("div.beautified").html(output);

you can see their home page source code to also work with their "cazilion" options.

All other answers have several other options, choose the one suits your application the best!

score 0 · Answer 2 · answered Oct 07 '15 at 16:56

A solution would be to write a JavaScript function to cycle through a jQuery list of elements, outputting indented HTML, for example:

function jQueryToHTML(dom, indent) {
    var code = "", indent = (indent || "") + "\t";
    dom.each(function(){
        var el = $(this);
        if(this.nodeType == 3) {
            code += indent + this.textContent;
        } else {
            code += indent + el.prop("outerHTML").match(/^<[a-zA-Z]+(>|.*?[^?]>)/g)[0] + "\n";
            code += jQueryToHTML(el.contents(), indent);
            code += indent + "</" + el.prop("tagName").toLowerCase() + ">" + "\n";
        }
    });
    return code;
}

indentedCode = jQueryToHTML($("#theElement"));

How do I "codify" and "beautify" code?

2 Answers2