Possible to implement formatting for HTML editor?

Anki Suggestions
1

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.

2 Likes
2

Hi,

Install the last version of Anki ! :wink:

3

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.

image
image1864×705 245 KB

1 Like
4

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

5

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

6

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

7 Likes
7

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.

8

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?

9

Thanks a lot! I can confirm it works on 2.1.55 RC 1. Would you like to upload this add-on on ankiweb, so more people can benefit from it?

10

@hkr If you’re considering spending time on this, I’d rather you create a PR to display the CodeMirror content formatted, but store it minified :v:

4 Likes