Update Broke compatibility with `Addon-anki-enhanced-cloze`

[KAGEYAM4]

Bug description Previously Clozed Code won't get Highighted correctly. Now with new update to https://ankiweb.net/shared/info/112228974 , the code is getting prefectly SyntaxHighlighted. But it broke opening the cloze using keyboard shortuce 'J' and they can only be revealed after click show answer - https://ankiweb.net/shared/info/1990296174

Reproduction steps Steps to reproduce the behavior:

0. Select Note type - Enhanced Clozed
1. Use code Highlighter to highlight the code Ctrl+'
2. Select the code and create a cloze
3. Create the Note
4. Review the note and try pressing 'J' , the cloze won't ber revealed.

If applicable, provide the offending field's HTML code. For instructions how to get that code, see this Anki help page.

The below highlighted &amp; clozed code won't get revealed using 'J'<br><pre><br></pre><pre><pre style="display:flex; justify-content:center;"><code class="language-cpp">{{c1::#include &lt;iostream&gt;

int main()
{
    std:­:cout &lt;&lt; 8 / 5 &lt;&lt; '\n';
    return 0;
}­}}</code></pre></pre>

Expected behavior Using 'J' to reveal the clozed card.

Screenshots

Additional information

• OS - Arch Linux x86_64, Kernel: 6.1.39-3-lts

[gregorias]

Thanks for reporting.

This should be fixed now, because I can reproduce this on an older version, but can't on https://github.com/gregorias/anki-code-highlighter/commit/d99b9b5d2e6139ea47a83b9fff165501eae7bd0e. Could you update the plugin and try again?

[KAGEYAM4]

its not working , also now the code block won't get revealed even when we press 'spacebar' to show all answer.

This is steps i followed ->

1. Make sure note type is Enhanced cloze 2.1 v2
2. Add Some normal text along with c++ code.
3. Select c++ code and press Ctrl+' , highlight.js, c++
4. Select the c++ code block again create a cloze out of it.
5. Done.

hello world<br><br><br><pre><code><pre style="display:flex; justify-content:center;"><code class="language-cpp">{{c1::<pre style="display:flex; justify-content:center;"><code class="language-cpp">#include &lt;iostream&gt;

int getByValue()
{
    return 5;
}

void getByReference(int&amp; x)
{
    x = 5;
}</code></pre>}}<br></code></pre></code></pre>

---

also , the code highlighter now highlighting differently ->

[gregorias]

The card's HTML is mangled. You shouldn't highlight already instrumented code. It results in nested <pre><code> block which is not valid HTML.

Once I cleaned it up to something that would result in a normal editing session:

hello world<br><br><br>{{c1::<pre style="display:flex; justify-content:center;"><code class="language-cpp">#include &lt;iostream&gt;

int getByValue()
{
    return 5;
}

void getByReference(int&amp; x)
{
    x = 5;
}</code></pre>}}<br>

the functionality you mention seems to work fine.

[KAGEYAM4]

While i was reviewing my older cards now , the behaviour is mixed . eg->

<div style="text-align: center;"><b><font size="5">Iterators and Ranges</font></b></div><br>An <b>iterator</b> is {{c1::a variable that points to an element of a data structure. The iterator begin points to the first element of a data structure, and the iterator end points to the position after the last element. For example, the situation can look as follows in a vector v that consists of eight elements:<br><br><div style="text-align: center;"><img src="paste-52d65aa51374e4e13ca5c3d8f1f78ee960ac2eb6.jpg"></div><div style="text-align: center;"><br></div>Note the asymmetry in the iterators: begin() points to an element in the data structure, while end() points outside the data structure.}}<br><br>A <b>range</b> is {{c1::a sequence of consecutive elements in a data structure. The usual way to specify a range is to give iterators to its first element and the position after its last element. In particular, the iterators begin() and end() define a range that contains all elements in a data structure.}}<br><br>The C++ standard library functions typically operate with {{c1::ranges. For example, the following code first sorts a vector, then reverses the order of its elements, and finally shuffles its elements.<br><pre style="display:flex; justify-content:center;"><code class="language-cpp">sort(v.begin(),v.end());
reverse(v.begin(),v.end());
random_shuffle(v.begin(),v.end());</code></pre>}}<br><br>The element to which an iterator points can be accessed using {{c1::the * syntax. For example, the following code prints the first element of a vector:<br><pre style="display:flex; justify-content:center;"><code class="language-cpp">cout &lt;&lt; *v.begin() &lt;&lt; "\n";</code></pre>}}<br><br>To give a more useful example, {{c1::<b>lower_bound</b> gives an iterator to the first element in a sorted range whose value is at least x, and <b>upper_bound</b> gives an iterator to the first element whose value is larger than x:<br><pre style="display:flex; justify-content:center;"><code class="language-cpp">vector&lt;int&gt; v = {2,3,3,5,7,8,8,8};
auto a = lower_bound(v.begin(),v.end(),5);
auto b = upper_bound(v.begin(),v.end(),5);
cout &lt;&lt; *a &lt;&lt; " " &lt;&lt; *b &lt;&lt; "\n"; // 5 7</code></pre><br>Note that the above functions only work correctly when the given range is sorted. The functions use binary search and find the requested element in logarithmic time.<br><br>If there is no such element, the functions return an iterator to the element after the last element in the range.}}<br><br>The C++ standard library contains a large number of useful functions that are worth exploring. For example, the following code creates a vector that contains the unique elements of the original vector in a sorted order:<br><pre style="display:flex; justify-content:center;"><code class="language-cpp">{{c1::sort(v.begin(),v.end());
v.erase(unique(v.begin(),v.end()),v.end());}}</code></pre>

These are -->

1. If i use J to reveal code , they don't get highlighted.
2. After going through all the cloze, if i press SpaceBar to Reveal the card , the above part where the code wasn't highlighted will now get syntax-highlighted.
3. There still some code which dosen't get revealed though both 'J' and 'Space-Bar' making them totally hidden.

1st point behaviour->

2nd and 3rd Point behaviour -->

[gregorias]

1. If i use J to reveal code , they don't get highlighted.

Did that code get highlighted on a previous version? I'd be surprised, I haven't changed anything in how highlight.js renders code snippets, which is to say, it runs a JS script.

If not:

1. Use Pygments highlighting, which doesn't require JS and should work here as you intend it to work.
2. I'd bring it up to the extended cloze maintainer, so that they can address that in their rendering mechanism.

3. There still some code which dosen't get revealed though both 'J' and 'Space-Bar' making them totally hidden.

<pre style="display:flex; justify-content:center;"><code class="language-cpp">{{c1::sort(v.begin(),v.end());
v.erase(unique(v.begin(),v.end()),v.end());}}</code></pre>

This snippet never should have worked, because it inlines the cloze inside a highlight.js block, which expects pure code.

Overall, I think your best bet is to use Pygments for Cloze cards. That's why I added that as an alternative last year. The MO of highlight.js is to use JS and it doesn't play well with cloze functionality.

[gregorias]

Yep, I've tested it with Pygments and works fine (just pressed J on preview):

[KAGEYAM4]

Thank You so much, will use Pygment from now on.

[KAGEYAM4]

Yep, I've tested it with Pygments and works fine (just pressed J on preview):

can you please give the html code of this , so i can match it against mine to learn and correct it.

I use learncpp.com to make notes out of it , i think when i copy code , the html tags get copied too and then when i apply pygments over it, the html gets messed up. Anyidea how i can prevent this ?

[gregorias]

This plugin needs to receive code without HTML markup (except for
tags) to highlight correctly. You can verify that there's no HTML markup by checking the HTML source code field (the field that open when you press ctrl/cmd + shift + x).

You can avoid copying HTML markup by copying directly to the HTML source code field.

For complex notes I usually copy-paste relevant code into an empty field, highlight it there, and copy paste the highlighted source code into its target field.