Make solutions compatible with Commonmark

In modern Markdown, blank lines end raw-HTML blocks. This could interfere with code displays in solutions.
pyvec · Apr 27, 2024 · 5a006a0 · 5a006a0
1 parent a7eb92c
commit 5a006a0
Show file tree

Hide file tree

Showing 7 changed files with 120 additions and 8 deletions.
diff --git a/naucse_render/templates.py b/naucse_render/templates.py
@@ -67,6 +67,9 @@ def solution(ctx, text):
     solution = ctx['$markdown'](text)
     solutions.append(solution)
 
+    # make sure there are no empty lines, which exit Markdown's raw-HTML mode
+    solution = solution.replace('\n', Markup('\n<span></span>'))
+
     return Markup(textwrap.dedent("""
         <div class="solution" id="solution-{}">
             <h3>Řešení</h3>

diff --git a/test_naucse_render/fixtures/expected-compiled/default/course.json b/test_naucse_render/fixtures/expected-compiled/default/course.json
@@ -69,6 +69,7 @@
                         },
                         "ids": [
                             "co_programatorsky_editor_umi",
+                            "solution-0",
                             "volba_a_nastaveni_editoru"
                         ],
                         "license": "cc-by-sa-40",
@@ -77,10 +78,15 @@
                             "#volba_a_nastaveni_editoru",
                             "naucse:page?lesson=beginners/install-editor&page=atom",
                             "naucse:page?lesson=beginners/install-editor&page=gedit",
-                            "naucse:page?lesson=beginners/install-editor&page=gedit#nacvik_odsazovani"
+                            "naucse:page?lesson=beginners/install-editor&page=gedit#nacvik_odsazovani",
+                            "naucse:solution?solution=0"
                         ],
                         "slug": "index",
-                        "solutions": [],
+                        "solutions": [
+                            {
+                                "content": "<div class=\"highlight\"><pre><span></span><span class=\"c1\"># Třikrát:</span>\n<span class=\"k\">for</span> <span class=\"n\">i</span> <span class=\"ow\">in</span> <span class=\"nb\">range</span><span class=\"p\">(</span><span class=\"mi\">3</span><span class=\"p\">):</span>\n\n    <span class=\"c1\"># Nakresli čtverec (kód zkopírovaný z předchozí úlohy a odsazený)</span>\n    <span class=\"k\">for</span> <span class=\"n\">j</span> <span class=\"ow\">in</span> <span class=\"nb\">range</span><span class=\"p\">(</span><span class=\"mi\">4</span><span class=\"p\">):</span>\n        <span class=\"n\">forward</span><span class=\"p\">(</span><span class=\"mi\">50</span><span class=\"p\">)</span>\n        <span class=\"n\">left</span><span class=\"p\">(</span><span class=\"mi\">90</span><span class=\"p\">)</span>\n\n    <span class=\"c1\"># Otoč se o 20°</span>\n    <span class=\"n\">left</span><span class=\"p\">(</span><span class=\"mi\">20</span><span class=\"p\">)</span>\n</pre></div>"
+                            }
+                        ],
                         "source_file": "lessons/beginners/install-editor/index.md",
                         "title": "Instalace editoru",
                         "vars": {}

diff --git a/test_naucse_render/fixtures/expected-compiled/default/install-editor/index.html b/test_naucse_render/fixtures/expected-compiled/default/install-editor/index.html
@@ -31,4 +31,23 @@ <h2 id="co_programatorsky_editor_umi">Co programátorský editor umí
 </ul>
 </li>
 </ul>
-<p>...</p>
+<p>...</p>
+<div class="solution" id="solution-0">
+    <h3>Řešení</h3>
+    <div class="solution-cover">
+        <a href="naucse:solution?solution=0"><span class="link-text">Ukázat řešení</span></a>
+    </div>
+    <div class="solution-body" aria-hidden="true">
+        <div class="highlight"><pre><span></span><span class="c1"># Třikrát:</span>
+<span></span><span class="k">for</span> <span class="n">i</span> <span class="ow">in</span> <span class="nb">range</span><span class="p">(</span><span class="mi">3</span><span class="p">):</span>
+<span></span>
+<span></span>    <span class="c1"># Nakresli čtverec (kód zkopírovaný z předchozí úlohy a odsazený)</span>
+<span></span>    <span class="k">for</span> <span class="n">j</span> <span class="ow">in</span> <span class="nb">range</span><span class="p">(</span><span class="mi">4</span><span class="p">):</span>
+<span></span>        <span class="n">forward</span><span class="p">(</span><span class="mi">50</span><span class="p">)</span>
+<span></span>        <span class="n">left</span><span class="p">(</span><span class="mi">90</span><span class="p">)</span>
+<span></span>
+<span></span>    <span class="c1"># Otoč se o 20°</span>
+<span></span>    <span class="n">left</span><span class="p">(</span><span class="mi">20</span><span class="p">)</span>
+<span></span></pre></div>
+    </div>
+</div>
diff --git a/test_naucse_render/fixtures/expected-compiled/lessons/course.json b/test_naucse_render/fixtures/expected-compiled/lessons/course.json
@@ -70,6 +70,7 @@
                         },
                         "ids": [
                             "co_programatorsky_editor_umi",
+                            "solution-0",
                             "volba_a_nastaveni_editoru"
                         ],
                         "license": "cc-by-sa-40",
@@ -78,10 +79,15 @@
                             "#volba_a_nastaveni_editoru",
                             "naucse:page?lesson=beginners/install-editor&page=atom",
                             "naucse:page?lesson=beginners/install-editor&page=gedit",
-                            "naucse:page?lesson=beginners/install-editor&page=gedit#nacvik_odsazovani"
+                            "naucse:page?lesson=beginners/install-editor&page=gedit#nacvik_odsazovani",
+                            "naucse:solution?solution=0"
                         ],
                         "slug": "index",
-                        "solutions": [],
+                        "solutions": [
+                            {
+                                "content": "<div class=\"highlight\"><pre><span></span><span class=\"c1\"># Třikrát:</span>\n<span class=\"k\">for</span> <span class=\"n\">i</span> <span class=\"ow\">in</span> <span class=\"nb\">range</span><span class=\"p\">(</span><span class=\"mi\">3</span><span class=\"p\">):</span>\n\n    <span class=\"c1\"># Nakresli čtverec (kód zkopírovaný z předchozí úlohy a odsazený)</span>\n    <span class=\"k\">for</span> <span class=\"n\">j</span> <span class=\"ow\">in</span> <span class=\"nb\">range</span><span class=\"p\">(</span><span class=\"mi\">4</span><span class=\"p\">):</span>\n        <span class=\"n\">forward</span><span class=\"p\">(</span><span class=\"mi\">50</span><span class=\"p\">)</span>\n        <span class=\"n\">left</span><span class=\"p\">(</span><span class=\"mi\">90</span><span class=\"p\">)</span>\n\n    <span class=\"c1\"># Otoč se o 20°</span>\n    <span class=\"n\">left</span><span class=\"p\">(</span><span class=\"mi\">20</span><span class=\"p\">)</span>\n</pre></div>"
+                            }
+                        ],
                         "source_file": "lessons/beginners/install-editor/index.md",
                         "title": "Instalace editoru",
                         "vars": {}

diff --git a/test_naucse_render/fixtures/expected-compiled/lessons/install-editor/index.html b/test_naucse_render/fixtures/expected-compiled/lessons/install-editor/index.html
@@ -31,4 +31,23 @@ <h2 id="co_programatorsky_editor_umi">Co programátorský editor umí
 </ul>
 </li>
 </ul>
-<p>...</p>
+<p>...</p>
+<div class="solution" id="solution-0">
+    <h3>Řešení</h3>
+    <div class="solution-cover">
+        <a href="naucse:solution?solution=0"><span class="link-text">Ukázat řešení</span></a>
+    </div>
+    <div class="solution-body" aria-hidden="true">
+        <div class="highlight"><pre><span></span><span class="c1"># Třikrát:</span>
+<span></span><span class="k">for</span> <span class="n">i</span> <span class="ow">in</span> <span class="nb">range</span><span class="p">(</span><span class="mi">3</span><span class="p">):</span>
+<span></span>
+<span></span>    <span class="c1"># Nakresli čtverec (kód zkopírovaný z předchozí úlohy a odsazený)</span>
+<span></span>    <span class="k">for</span> <span class="n">j</span> <span class="ow">in</span> <span class="nb">range</span><span class="p">(</span><span class="mi">4</span><span class="p">):</span>
+<span></span>        <span class="n">forward</span><span class="p">(</span><span class="mi">50</span><span class="p">)</span>
+<span></span>        <span class="n">left</span><span class="p">(</span><span class="mi">90</span><span class="p">)</span>
+<span></span>
+<span></span>    <span class="c1"># Otoč se o 20°</span>
+<span></span>    <span class="n">left</span><span class="p">(</span><span class="mi">20</span><span class="p">)</span>
+<span></span></pre></div>
+    </div>
+</div>
diff --git a/test_naucse_render/fixtures/expected-dumps/beginners/install-editor.yaml b/test_naucse_render/fixtures/expected-dumps/beginners/install-editor.yaml
@@ -109,9 +109,33 @@ data:
                     </ul>\n<p>...</p>\n<ul>\n<li><a href=\"naucse:page?lesson=beginners/install-editor&amp;page=gedit\"\
                     >Gedit</a> \u2013 b\xFDv\xE1 na syst\xE9mech s\_prost\u0159ed\xED\
                     m GNOME.<ul>\n<li>M\u016F\u017Eeme odk\xE1zat na <a href=\"naucse:page?lesson=beginners/install-editor&amp;page=gedit#nacvik_odsazovani\"\
-                    >N\xE1cvik odsazov\xE1n\xED</a>.</li>\n</ul>\n</li>\n</ul>\n<p>...</p>"
+                    >N\xE1cvik odsazov\xE1n\xED</a>.</li>\n</ul>\n</li>\n</ul>\n<p>...</p>\n\
+                    <div class=\"solution\" id=\"solution-0\">\n    <h3>\u0158e\u0161\
+                    en\xED</h3>\n    <div class=\"solution-cover\">\n        <a href=\"\
+                    naucse:solution?solution=0\"><span class=\"link-text\">Uk\xE1\
+                    zat \u0159e\u0161en\xED</span></a>\n    </div>\n    <div class=\"\
+                    solution-body\" aria-hidden=\"true\">\n        <div class=\"highlight\"\
+                    ><pre><span></span><span class=\"c1\"># T\u0159ikr\xE1t:</span>\n\
+                    <span></span><span class=\"k\">for</span> <span class=\"n\">i</span>\
+                    \ <span class=\"ow\">in</span> <span class=\"nb\">range</span><span\
+                    \ class=\"p\">(</span><span class=\"mi\">3</span><span class=\"\
+                    p\">):</span>\n<span></span>\n<span></span>    <span class=\"\
+                    c1\"># Nakresli \u010Dtverec (k\xF3d zkop\xEDrovan\xFD z p\u0159\
+                    edchoz\xED \xFAlohy a odsazen\xFD)</span>\n<span></span>    <span\
+                    \ class=\"k\">for</span> <span class=\"n\">j</span> <span class=\"\
+                    ow\">in</span> <span class=\"nb\">range</span><span class=\"p\"\
+                    >(</span><span class=\"mi\">4</span><span class=\"p\">):</span>\n\
+                    <span></span>        <span class=\"n\">forward</span><span class=\"\
+                    p\">(</span><span class=\"mi\">50</span><span class=\"p\">)</span>\n\
+                    <span></span>        <span class=\"n\">left</span><span class=\"\
+                    p\">(</span><span class=\"mi\">90</span><span class=\"p\">)</span>\n\
+                    <span></span>\n<span></span>    <span class=\"c1\"># Oto\u010D\
+                    \ se o 20\xB0</span>\n<span></span>    <span class=\"n\">left</span><span\
+                    \ class=\"p\">(</span><span class=\"mi\">20</span><span class=\"\
+                    p\">)</span>\n<span></span></pre></div>\n    </div>\n</div>"
                 ids:
                 - co_programatorsky_editor_umi
+                - solution-0
                 - volba_a_nastaveni_editoru
                 license: cc-by-sa-40
                 links:
@@ -120,8 +144,27 @@ data:
                 - naucse:page?lesson=beginners/install-editor&page=atom
                 - naucse:page?lesson=beginners/install-editor&page=gedit
                 - naucse:page?lesson=beginners/install-editor&page=gedit#nacvik_odsazovani
+                - naucse:solution?solution=0
                 slug: index
-                solutions: []
+                solutions:
+                -   content: "<div class=\"highlight\"><pre><span></span><span class=\"\
+                        c1\"># T\u0159ikr\xE1t:</span>\n<span class=\"k\">for</span>\
+                        \ <span class=\"n\">i</span> <span class=\"ow\">in</span>\
+                        \ <span class=\"nb\">range</span><span class=\"p\">(</span><span\
+                        \ class=\"mi\">3</span><span class=\"p\">):</span>\n\n   \
+                        \ <span class=\"c1\"># Nakresli \u010Dtverec (k\xF3d zkop\xED\
+                        rovan\xFD z p\u0159edchoz\xED \xFAlohy a odsazen\xFD)</span>\n\
+                        \    <span class=\"k\">for</span> <span class=\"n\">j</span>\
+                        \ <span class=\"ow\">in</span> <span class=\"nb\">range</span><span\
+                        \ class=\"p\">(</span><span class=\"mi\">4</span><span class=\"\
+                        p\">):</span>\n        <span class=\"n\">forward</span><span\
+                        \ class=\"p\">(</span><span class=\"mi\">50</span><span class=\"\
+                        p\">)</span>\n        <span class=\"n\">left</span><span class=\"\
+                        p\">(</span><span class=\"mi\">90</span><span class=\"p\"\
+                        >)</span>\n\n    <span class=\"c1\"># Oto\u010D se o 20\xB0\
+                        </span>\n    <span class=\"n\">left</span><span class=\"p\"\
+                        >(</span><span class=\"mi\">20</span><span class=\"p\">)</span>\n\
+                        </pre></div>"
                 source_file: lessons/beginners/install-editor/index.md
                 title: Instalace editoru
                 vars: {}

diff --git a/test_naucse_render/fixtures/test_content/lessons/beginners/install-editor/index.md b/test_naucse_render/fixtures/test_content/lessons/beginners/install-editor/index.md
@@ -39,3 +39,19 @@ Podpora více souborů
   * Můžeme odkázat na [Nácvik odsazování]({{ subpage_url('gedit') }}#nacvik_odsazovani).
 
 ...
+
+{% filter solution %}
+```python
+# Třikrát:
+for i in range(3):
+
+    # Nakresli čtverec (kód zkopírovaný z předchozí úlohy a odsazený)
+    for j in range(4):
+        forward(50)
+        left(90)
+
+    # Otoč se o 20°
+    left(20)
+
+```
+{% endfilter %}