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
Hi,
Install the last version of Anki !
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.
1 Like
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.
hkr
November 30, 2021, 1:02pm
6
Here is a quick-and-dirty add-on that allows you to pretty-format HTML in the HTML editor using js-beautify .
Requirements
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)
6 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.
x51mon
December 1, 2021, 8:16am
8
hkr:
Demo (Gif)
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?
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?
@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
4 Likes