How to Format/Beautify the HTML view of Feather's Content block?
 

The Web forms HtmlField in Sitefinity does have formatting/beautification of the Html output. You can check the following demo of the RadEditor on which the control is based:

http://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx

The MVC HtmlField in Sitefinity does not have formatting/beautification of the Html output. You can check the following demo of the Kendo Editor on which the control is based:

http://demos.telerik.com/kendo-ui/editor/all-tools

Unlike the RadEditor, the Kendo Editor does not have HTML beautification built in the control itself.

In order to Format/Beautify the Html a custom solution should be utilized where the built in sf-html-field will be extended. 

1. Check the following KB article on how to customize the components of the sf_html-field:

Feather: Override the html field

In this example, we will use a 3rd party Javascript library to Format/Beautify the Html.

2. In the sf-html-field.sf-cshtml paste the following code at the bottom:

<script src='http://lovasoa.github.io/tidy-html5/tidy.js'></script>;
<script>
  options = {
  "indent":"auto",
  "indent-spaces":2,
  "wrap":80,
  "markup":true,
  "output-xml":false,
  "numeric-entities":true,
  "quote-marks":true,
  "quote-nbsp":false,
  "show-body-only":true,
  "quote-ampersand":false,
  "break-before-br":true,
  "uppercase-tags":false,
  "uppercase-attributes":false,
  "drop-font-tags":true,
  "tidy-mark":false
  }
</script>

3. In the sf-html-field.js file modify the "scope.toggleHtmlView" function as below:

scope.toggleHtmlView = function () {
                            if (scope.editor === null)
                                return;

                            if (isInHtmlView === false) {
                                $(htmlElement.find(".js-htmlview")).addClass("active");

                                var htmlEditor = $('<textarea class="html k-content" ng-model="sfModel" style="resize: none">');
                                $compile(htmlEditor)(scope);
                                htmlEditor.insertAfter(scope.content);
                                scope.content.hide();

                                if (!fullToolbar) {
                                    fullToolbar = $(htmlElement.find(".k-editor-toolbar"));
                                }

                                if (!customButtons) {
                                    customButtons = fullToolbar.children().filter(function (child) {
                                        return $(this).children(".js-custom-tool").length > 0;
                                    });
                                }

                                if (!shortToolbar) {
                                    shortToolbar = fullToolbar.clone(true);
                                    shortToolbar.html("");
                                    fullToolbar.after(shortToolbar);
                                }

                                fullToolbar.addClass("sf-toolbar-full");
                                shortToolbar.addClass("sf-toolbar-short");
                                shortToolbar.show();
                                shortToolbar.append(customButtons);

                                //format string here
                                var initValue = scope.editor.value();
                                var fixedValue = tidy_html5(initValue, options);

                                if (fixedValue != "") {
                                    scope.sfModel = fixedValue;
                                }

                                //endformat

                            } else {
                                $(htmlElement.find(".js-htmlview")).removeClass("active");
                                fullToolbar.removeClass("sf-toolbar-full");
                                shortToolbar.removeClass("sf-toolbar-short");

                                scope.sfModel = scope.editor.value();

                                shortToolbar.hide();
                                fullToolbar.show();
                                fullToolbar.append(customButtons);

                                var html = scope.editor.wrapper.find('.html');
                                html.remove();
                                scope.content.show();
                            }

                            isInHtmlView = !isInHtmlView;
                        };