Prettifying [...] Code Snippets in SuperMemo

2019-05-26 2020-12-20 539 words 3 minutes

Contents

Danger

2020-04-25 Update: I no longer run code snippets through Microsoft Word. It’s a terrible idea: it injects a lot of proprietary attributes that is hard to deal with. Now I just copy and paste code snippets from VSCode.

When you import code snippets from Microsoft Word into SuperMemo, all the syntax highlighting (style, spacing, color etc) is retained. It looks all nice and pretty… except when you have to modify it in SuperMemo. This is especially true when importing HTML code snippets. The problem with HTML code snippets is that there are open tags and end tags. Clozing only the open tag but not the end tag basically reveals the answer:

No two clozes can be made in one element (except you manually do it yourself), so when you cloze the open tag, while manually hiding the end tag, it looks like this:

The end tag has retained the styling from the previous HTML open tags. This is not what I want. I want the same consistent cloze style like the open tag. I know I could overlook this aesthetic issue… but I can’t. It just bugs me. So I’ve taken steps to prettify it with the software Ditto and an ahk script.

Update: 9 June 2019

Method 1:

As inspired by u/alessivs, this updated method is better than my old method. His method doesn’t require using notepad. The manual step is as follow:

1. Type: [...] in the HTML component

2. Select the text

3. Press Shift+Ctrl+1 (equivalent to component menu : Text : Convert : Parse HTML)

Here’s my autohotkey script for the above steps.

Method 2:

Ditto is a free and open-source Windows Clipboard manager. You can set keyboard shortcut keys to paste something specific. I have set Control + Alt + V to paste [...], which is the HTML code for the cloze style.

Here’s the ahk script to open the element HTML source code, then automatically open the “Search and Replace” function, then type […]

With Ditto and the ahk script, when you encounter the ugly […]:

1. Press the ahk shortcut (Control + CapsLock)

2. Find the corresponding […]. It might not be the first […] so this has to be manually decided.

3. Press Ctrl + Alt + V (shortcut set from Ditto) to paste [...]

4. Save and close the Notepad

5. Now it looks all pretty again

Major Takeaway

TL;DR: If you want the same size and format of the “official” cloze style, use the HTML [...].

I used to have an ahk script that sets […] to bold, font color red and background yellow. It looks the same but this script is error-prone: Automating the mouse to click at a specific point will easily result in error if your SuperMemo window size changes. Also, this doesn’t work when the […] is embedded inside other tags, i.e. you might get bigger […]. I don’t like the inconsistency… or I am just procrastinating.

Closing Remarks

I am aware that this problem/tutorial is a pretty rare case that doesn’t apply to most people (code snippets, more than one cloze). However, if you have the same issue, I hope this solution is helpful.