提问人：Lennart Oelschläger 提问时间：11/5/2023 最后编辑：Lennart Oelschläger 更新时间：11/13/2023 访问量：196
如何在 Quarto 网站上使用 JSON 中的 Markdown？
How can I use Markdown in JSON on a Quarto website?
问：
更新：最小可重现示例
在下面的 Quarto 文档中，版本 1 被解释为 Markdown（请参阅下面的 Update 2），但版本 2 不是。我应该怎么做才能使版本 2 正常工作？你可以在下面找到我的动机。
---
format: html
---
<!-- version 1: this works (interprets Markdown) -->
<div>
**front1** $a^2$ $b + a$ [link](destination.qmd)
</div>
<!-- version 2: this does not -->
<div class = "question"></div>
<script>
var flashcards = [
{
"Q":"**front1** $a^2$ $b + a$ [link](destination.qmd)"
}
]
const question = document.querySelector('.question');
question.innerHTML = `${flashcards[0].Q}`
</script>
更新 2：Quarto 如何解释 LaTeX / Markdown
Quarto 将上面的版本 1 解释为（出于某种未知原因，我不得不使用双反斜杠而不是单反斜杠）：
---
format: html
---
<!-- version 1: this works (interprets Markdown) -->
<link href="test_files/libs/bootstrap/bootstrap.min.css" rel="stylesheet" id="quarto-bootstrap" data-mode="light">
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml-full.js" type="text/javascript"></script>
<p><strong>front1</strong> <span class="math inline">\\(a^2\\)</span> <span class="math inline">\\(b + a\\)</span> <a href="destination.qmd">link</a></p>
这会产生所需的结果。但是把它放到版本 2 中感觉很笨拙，仍然不起作用：
---
format: html
---
<!-- version 2: this does not -->
<link href="test_files/libs/bootstrap/bootstrap.min.css" rel="stylesheet" id="quarto-bootstrap" data-mode="light">
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml-full.js" type="text/javascript"></script>
<div class = "question"></div>
<script>
var flashcards = [
{
"Q":"<div><p><strong>front1</strong> <span class='math inline'>\\(a^2\\)</span> <span class='math inline'>\\(b + a\\)</span> <a href="destination.qmd">link</a></p></div>"
}
]
const question = document.querySelector('.question');
question.innerHTML = `${flashcards[0].Q}`
</script>
赋予动机
我为我的 Quarto 网站实现了一个简单的抽认卡应用程序，遵循了一个不错的 YouTube 教程。该应用程序可以工作，但我想将 Markdown 用于抽认卡内容（格式化 LaTeX 方程式、链接等）。
我目前的实现：我将抽认卡的数据以 JSON 格式存储在文件中，并在这里天真地使用 Markdown，但在我渲染我的 Quarto 网站时没有解释这一点：flashcards.js
var flashcards = [
{
"Q":"**front1** $a^2$ [link](destination.qmd)",
"A":"back1"
},
{
"Q":"front2",
"A":"back2"
},
{
"Q":"front3",
"A":"back3"
},
]
我的是.qmd
---
format:
html:
include-after-body:
- text: |
<script src = "flashcards.js"></script>
<script src = "reveal.js"></script>
---
<body onload = "getRandomCard()">
<div class = "question"></div>
<div class = "flashcard-button">
<button class = "check">Show solution</button>
<button class = "next">Next Card</button>
</div>
<div class = "answer"></div>
</body>
和 JavaScript 显示一个新的抽认卡并显示背面在里面：reveal.js
const question = document.querySelector('.question');
const answer = document.querySelector('.answer');
const check = document.querySelector('.check');
const next = document.querySelector('.next');
let card = -1;
let solution = false;
function getRandomCard() {
let random;
do {
random = Math.floor(Math.random() * flashcards.length);
}
while (card == random);
card = random;
question.innerHTML = `${flashcards[card].Q}`
answer.innerHTML = `${flashcards[card].A}`
}
check.addEventListener('click', function() {
if (solution) {
answer.style.display = 'none';
solution = false;
} else {
answer.style.display = 'block';
solution = true;
}
});
next.addEventListener('click', function() {
answer.style.display = 'none';
solution = false;
getRandomCard();
});
所以我的问题是：是否有可能（如果是，如何）在我的文件中使用 Markdown（用于数学方程式、链接）？我觉得我在这里错过了一些简单的东西，希望有人能为我指出正确的方向。flashcards.js
答： 暂无答案
评论