back.html

<div class="card"><div class="content">{{Back}}</div></div>

front.html

<div class="card"><div class="content">{{Front}}</div></div>

generate_anki_cards.rb

#!/usr/bin/env ruby

require 'find'
require 'yaml'
require 'csv'
require 'erb'

all = ARGV[0] == "all"

def process_card(card)
  ERB::Util.h(card.strip).gsub(/\\n/, '<br>')
end

root = File.expand_path('..', __dir__)
Find.find(root) do |file|
  Find.prune if File.basename(file) == 'bin'
  next unless file.end_with?('.yml')

  deck = file.sub(/\.yml\z/, '.csv')
  if all || (!File.exist?(deck) || File.mtime(file) > File.mtime(deck))
    deck_name = deck.sub(%r(.*?/decks/), '').gsub('/', '::').sub(/\.csv\z/, '')
    puts "generating #{deck_name}"

    CSV.open(deck, 'w', col_sep: "\t", force_quotes: true) do |csv|
      cards = YAML.load_file(file)
      cards.each do |card|
        question = process_card(card['q'])
        answer = process_card(card['a'])
        csv << [question, answer]
      end
    end
  end
end

style.css

.card {
  font-family: Menlo;
  font-size: 22px;
  font-weight: bold;
  text-align: center;
}

.content {
  white-space: pre;
  text-align: left;
  display: inline-block;
}

.replaybutton {
  display: none;
}