back_template.html

{{FrontSide}}
<hr id=answer>
{{Back}}

<script>
var content = document.querySelector('.card').innerHTML;
document.querySelector('.card').innerHTML = content.replace(/`(.*?)`/g, "<code>$1</code>");
</script>

<script type="text/x-mathjax-config">
MathJax.Hub.processSectionDelay = 0;
MathJax.Hub.Config({
  messageStyle: 'none',
  showProcessingMessages: false,
  tex2jax: {
    inlineMath: [['$', '$']],
    displayMath: [['$$', '$$']],
    processEscapes: true
  }
});
</script>

<script type="text/javascript">
(function() {
  if (window.MathJax != null) {
    var card = document.querySelector('.card');
    MathJax.Hub.Queue(['Typeset', MathJax.Hub, card]);
    return;
  }
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_SVG';
  document.body.appendChild(script);
})();
</script>

front_template.html

{{Front}}
<script>
var content = document.querySelector('.card').innerHTML;
document.querySelector('.card').innerHTML = content.replace(/`(.*?)`/g, "<code>$1</code>");
</script>

<script type="text/x-mathjax-config">
MathJax.Hub.processSectionDelay = 0;
MathJax.Hub.Config({
  messageStyle: 'none',
  showProcessingMessages: false,
  tex2jax: {
    inlineMath: [['$', '$']],
    displayMath: [['$$', '$$']],
    processEscapes: true
  }
});
</script>

<script type="text/javascript">
(function() {
  if (window.MathJax != null) {
    var card = document.querySelector('.card');
    MathJax.Hub.Queue(['Typeset', MathJax.Hub, card]);
    return;
  }
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_SVG';
  document.body.appendChild(script);
})();
</script>

styling.css

@font-face {
  font-family: junicode;
  src: url('_junicode.ttf');
}
.card, table {
  font-family: Helvetica, sans-serif, junicode;
  font-size: 22px;
  text-align: center;
  color: #222222;
  line-height: 1.25;
}
table {
  margin: auto;
  border-collapse: collapse;
}
.deck, .hint, table.declension td:first-child {
  font-size: 12px;
  color: lightgrey;
}
.deck { font-size: 9px; }
.letter { font-size: 32px; }
.code { 
  font-family: Inconsolata, Courier New, monospace;
  font-size: 16px;
}
table.declension { text-align: left; }
table.declension td:first-child { text-align: right; }
table.i-umlaut td  {
    border: 1px solid lightgray;
    height: 2em;
    width: 4.5em;
}

code {
  font-family: monospace, monospace;
  padding: 0.2em 0.4em;
  margin: 0;
  background-color: rgba(27,31,35,0.05);
  border-radius: 3px;
}