Skip to content

Instantly share code, notes, and snippets.

@brnpimentel
Created December 18, 2017 13:37
Show Gist options
  • Save brnpimentel/3660b71dbc68691cdc8ac41cec379e2f to your computer and use it in GitHub Desktop.
Save brnpimentel/3660b71dbc68691cdc8ac41cec379e2f to your computer and use it in GitHub Desktop.
JS Beautify hack to works with blade directives (laravel)
function style_html(html_source, options, js_beautify, css_beautify) {
html_source = html_source.replace(/\@([^\n\s]*)/ig, "<blade $1/>");
...
sweet_code = sweet_code.replace(/<blade ([^\n]*)\/>/ig, "@$1");
sweet_code = sweet_code.replace(/\(\ \'/ig, "('");
...
return sweet_code;
}
@vesper8
Copy link

vesper8 commented Feb 6, 2018

ugh this is very frustrating.. several blade extensions in vscode but not one properly handles formatting inside blade files.. and this solution here while great and thanks for sharing is much too complicated

here's to hoping someone takes this solution and makes it into an easy-to-install extension

@fzldn
Copy link

fzldn commented Apr 5, 2018

I made some improvement from codes above, this is not perfect but makes blade formatter cleaner

function Beautifier(html_source, options, js_beautify, css_beautify) {
    //Wrapper function to invoke all the necessary constructors and deal with the output.
    html_source = html_source || '';
    
    // BEGIN
    html_source = html_source.replace(/\{\{((?:(?!\}\}).)+)\}\}/g, function (m, c) {
        if (c) {
            c = c.replace(/(^[ \t]*|[ \t]*$)/g, '');
            c = c.replace(/'/g, '&#39;');
            c = c.replace(/"/g, '&#34;');
            c = encodeURIComponent(c);
        }
        return "{{" + c + "}}";
    });
    html_source = html_source.replace(/^[ \t]*@([a-z]+)([^\n]*)$/gim, function (m, d, c) {
        if (c) {
            c = c.replace(/'/g, '&#39;');
            c = c.replace(/"/g, '&#34;');
            c = "|" + encodeURIComponent(c);
        }
        switch (d) {
            case 'break':
            case 'continue':
            case 'empty':
            case 'else':
            case 'elseif':
            case 'extends':
            case 'case':
            case 'csrf':
            case 'include':
            case 'json':
            case 'method':
            case 'parent':
            case 'stack':
            case 'yield':
                return "<blade " + d + c + "/>";
                break;
            default:
                if (d.startsWith('end')) {
                    return "</blade " + d + c + ">";
                } else {
                    return "<blade " + d + c + ">";
                }
                break;
        }
    });
    // END

    ...

    var sweet_code = multi_parser.output.join('').replace(/[\r\n\t ]+$/, '');
                    
    // BEGIN
    sweet_code = sweet_code.replace(/^([ \t]*)<\/?blade ([a-z]+)\|?([^>\/]+)?\/?>$/gim, function (m, s, d, c) {
        if (c) {
            c = decodeURIComponent(c);
            c = c.replace(/&#39;/g, "'");
            c = c.replace(/&#34;/g, '"');
            c = c.replace(/^[ \t]*/g, '');
        } else {
            c = "";
        }
        if (!s) {
            s = "";
        }
        return s + "@" + d + c;
    });
    sweet_code = sweet_code.replace(/\{\{((?:(?!\}\}).)+)\}\}/g, function (m, c) {
        if (c) {
            c = decodeURIComponent(c);
            c = c.replace(/&#39;/g, "'");
            c = c.replace(/&#34;/g, '"');
            c = c.replace(/(^[ \t]*|[ \t]*$)/g, ' ');
        }
        return "{{" + c + "}}";
    });
    // END

    ...

    return sweet_code;
}

hope this will help

happy coding!

@mpryvkin
Copy link

mpryvkin commented Apr 21, 2018

@fzldn, thanks for the snippet, works great. This part of the regex [^\n] needs to be changed to [^\r\n] to remove CR 0x0D character on Windows.

I added some other minor changes and created this gist based on your code.

@fzldn
Copy link

fzldn commented Aug 31, 2018

I also make the gist for js-beautify hack for HookyQR.beautify version 1.4.2 here the gist

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment