[FR] Bold and Highlight to cloze inside Roam basic template

[monk-blade]

It would be very nice to see bold and highlight (both) options to see as cloze in basic card template.

[monk-blade]

Some quick hack inside Anki. Useful to hide/reveal bold and highlighted texts.

Some CSS Change

/* Manual CSS add */
b {
    border-bottom:1px solid black;
    color:transparent;
    }
b:hover {
        color: initial;
        border-bottom: initial;
    }
.roam-highlight {
        background-color: #fef09f;
        border-bottom:1px solid black;
        color:transparent;
        margin: -2px;
        padding: 2px;
    }
.roam-highlight:hover {
        background-color: #fef09f;
        color: initial;
        border-bottom: initial;
        margin: -2px;
        padding: 2px;
    }

Back card template

{{FrontSide}}

<hr id=answer>
<button onclick="reveal()">Reveal/Hide</button></br>
{{Back}}
<script>
    function reveal() {

            var bold_ele = document.querySelectorAll('b');

            for (var i = 0; i < bold_ele.length; i++) {
            var bold_style = getComputedStyle(bold_ele[i], 'color');

            if(bold_style.color === "rgba(0, 0, 0, 0)" ) {
                bold_ele[i].setAttribute("style", "color:initial");
            } else {
                bold_ele[i].setAttribute("style", "color:transparent");
            }

            }
            //highlights section
            var high_ele = document.querySelectorAll('.roam-highlight');

            for (var i = 0; i < high_ele.length; i++) {
            var high_style = getComputedStyle(high_ele[i], 'color');
            if(high_style.color === "rgba(0, 0, 0, 0)" ) {
                high_ele[i].setAttribute("style", "color:initial");
            } else {
                high_ele[i].setAttribute("style", "color:transparent");
            }

            }

    }
    </script>