Possible to implement formatting for HTML editor?

It would be great if there were some way to format the content of the HTML editor. I have many multi-row tables which are displayed as a single line, making them very difficult to read or edit.

Google came up with a couple of leads. I don’t know if they could be implemented into Anki or not.

This Github code seems to produce this output.

Alternatively, threads on the CodeMirror forum suggest using the browser version of Prettier.

Hi,

Install the last version of Anki ! :wink:

This is what editing a table looks like in the latest version. It displays the entire table as a single row. What I’m looking for is something that displays tables in a more readable format.

I use tablesgenerator.com and I copy/paste the code into Anki, in this way I don’t have this problem, you should try

My tables use standard simple html. They use only the <table> <tr> and <td> tags.

Here is a quick-and-dirty add-on that allows you to pretty-format HTML in the HTML editor using js-beautify.

Requirements

  • node.js

Download js-beautify and create add-on

  • Create a new folder in the addons21 folder (assuming beautify_html)
  • Launch a console (Command Prompt, Powershell, Git Bash, etc.) and navigate to beautify_html directory.
  • Download js-beautify
    • npm init -y
    • npm install --save-dev js-beautify
  • Create my-script.js in beautify_html directory and type the following code:
    function getActiveCodeMirror() {
        const cm = [...document.querySelectorAll(".CodeMirror")].find((ele) =>
            ele.contains(document.activeElement)
        );
        return cm ? cm.CodeMirror : cm;
    }
    
    // https://github.com/beautify-web/js-beautify#setting-inheritance-and-language-specific-overrides
    const opt = {
        indent_size: 2,
    };
    
    function beautify() {
        const cm = getActiveCodeMirror();
        cm?.getDoc().setValue(html_beautify(cm.getValue(), opt));
    }
    
  • Create __init__.py in beautify_html directory and type the following code:
    from typing import Any, Optional
    
    import aqt
    
    root = f"/_addons/{__name__.split('.')[0]}"
    js_beautify_path = f"{root}/node_modules/js-beautify/js/lib/beautify-html.js"
    my_script_path = f"{root}/my-script.js"
    
    
    def on_editor_will_show_context_menu(
        webview: aqt.editor.EditorWebView, menu: aqt.qt.QMenu
    ) -> None:
        def callback(inPlainTextInput) -> None:
            if inPlainTextInput:
                menu.addAction("Beautify", lambda: webview.eval("beautify();"))
    
        webview.evalWithCallback("!!getActiveCodeMirror();", callback)
    
    
    def on_webview_will_set_content(
        web_content: aqt.webview.WebContent, context: Optional[Any]
    ) -> None:
        if isinstance(context, aqt.editor.Editor):
            web_content.js.extend((js_beautify_path, my_script_path))
    
    
    aqt.mw.addonManager.setWebExports(__name__, r".+\.js")
    aqt.gui_hooks.webview_will_set_content.append(on_webview_will_set_content)
    aqt.gui_hooks.editor_will_show_context_menu.append(on_editor_will_show_context_menu)
    

How to use this add-on:

  • Right-click on the HTML editor → Click on Beautify command

Demo (Gif)

beautify-html

4 Likes

Thanks a lot for that. I’ll install it and see how it goes. Hopefully, there will be a built-in solution at some point, in the meantime, I will give this a try.

Sorry I have to ask: how did you get that little html button in the top left corner of the field that keeps the normal text when the html is displayed?

Also should this add-on work on all operating systems?