JS Beautify hack to works with blade directives (laravel)

beautify-html.js

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;

}

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, ''');
            c = c.replace(/"/g, '"');
            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, ''');
            c = c.replace(/"/g, '"');
            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!

@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.

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