Add syntax highlighting to src blocks

[ghost]

This would basically mean running code blocks through some extra formatting script to add syntax highlighting like this plugin does: https://github.com/glutanimate/syntax-highlighting

[matiya]

You don't need an external program since anki-editor exports the src code blocks as <pre class="src src-lang"> where lang is the actual programming language.

Then you to add a CSS to your anki card template like: https://yiufung.net/ox-hugo/anki-basic.css

[doolio]

I don't think it is even necessary to add any CSS to your anki cards. If org-html-htmlize-output-type has it default value of inline-css then your Emacs theme syntax highlighting gets applied. I suggest to use a light theme though when producing your cards - see https://github.com/gongzhitaao/orgcss/#code-highlight.

[whatacold]

@doolio Hi, why doesn't it work for me? I confirmed that the value of org-html-htmlize-output-type is inline-css.

[whatacold]

Hi @matiya,

Then you to add a CSS to your anki card template like: https://yiufung.net/ox-hugo/anki-basic.css

Could you elaborate on this? I added the below code at the beginning of the file, but it didn't work:

#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="https://yiufung.net/ox-hugo/anki-basic.css"/>

I've tried with org-html-htmlize-output-type being set to inline-css and css, neither worked.

[doolio]

Hi, why doesn't it work for me? I confirmed that the value of org-html-htmlize-output-type is inline-css.

Odd it works for me.

As for what matiya suggested he was referring to adding the CSS within Anki itself in your card template. I have the following in the "Styling" box of the card GUI from within the Browse GUI. You can change it to your tastes.

.card {
 font-family: arial;
 font-size: 20px;
 text-align: left;
 color: black;
 background-color: white;
}

.front {
  text-align: left;
}

:not(pre) > code {
    padding: 0px 0px;
    margin: auto 1px;
    border: 0.5px solid #eee;
    border-radius: 3px;
    background-clip: padding-box;
    background-color: #eee;
    color: #333;
    font-size: 20px;
}

.linenr {
    font-size: 18px;
    color: #7f7f7f;
}

.org-src-container {
    border: 1px solid #ccc;
    box-shadow: 3px 3px 3px #eee;
    font-size: 20px;
    margin: 1em auto;
    padding: 0.1em 0.5em;
    position: relative;
}

.org-src-container>pre {
    overflow: auto;
}

.org-src-container>pre:before {
    display: block;
    position: absolute;
    background-color: #b3b3b3;
    top: 0;
    right: 0;
    padding: 0 0.5em;
    border-bottom-left-radius: 8px;
    border: 0;
    color: white;
    font-size: 18px;
}

.org-src-container>pre.src-abc:before {
    content: 'ABC';
}
.org-src-container>pre.src-groovy:before {
    content: 'Apache Groovy';
}
.org-src-container>pre.src-arduino:before {
    content: 'Arduino';
}
.org-src-container>pre.src-asymptote:before {
    content: 'Asymptote';
}
.org-src-container>pre.src-awk:before {
    content: 'AWK';
}
.org-src-container>pre.src-C:before {
    content: 'C';
}
.org-src-container>pre.src-cpp:before {
    content: 'C++';
}
.org-src-container>pre.src-csharp:before {
    content: 'C#';
}
.org-src-container>pre.src-calc:before {
    content: 'Calc';
}
.org-src-container>pre.src-clojure:before {
    content: 'Clojure';
}
.org-src-container>pre.src-comint:before {
    content: 'Comint mode';
}
.org-src-container>pre.src-coq:before {
    content: 'Coq';
}
.org-src-container>pre.src-css:before {
    content: 'CSS';
}
.org-src-container>pre.src-D:before {
    content: 'D';
}
.org-src-container>pre.src-ditaa:before {
    content: 'Ditaa';
}
.org-src-container>pre.src-ebnf:before {
    content: 'ebnf2ps';
}
.org-src-container>pre.src-elisp:before {
    content: 'Emacs Lisp';
}
.org-src-container>pre.src-emacs-lisp:before {
    content: 'Emacs Lisp';
}
.org-src-container>pre.src-eshell:before {
    content: 'Eshell';
}
.org-src-container>pre.src-fomus:before {
    content: 'FOMUS';
}
.org-src-container>pre.src-F90:before {
    content: 'Fortran';
}
.org-src-container>pre.src-forth:before {
    content: 'GForth';
}
.org-src-container>pre.src-gnuplot:before {
    content: 'Gnuplot';
}
.org-src-container>pre.src-screen:before {
    content: 'GNU Screen';
}
.org-src-container>pre.src-sed:before {
    content: 'GNU sed';
}
.org-src-container>pre.src-dot:before {
    content: 'Graphviz';
}
.org-src-container>pre.src-haskell:before {
    content: 'Haskell';
}
.org-src-container>pre.src-hledger:before {
    content: 'hledger';
}
.org-src-container>pre.src-html:before {
    content: 'HTML'
}
.org-src-container>pre.src-io:before {
    content: 'io';
}
.org-src-container>pre.src-J:before {
    content: 'J';
}
.org-src-container>pre.src-java:before {
    content: 'Java';
}
.org-src-container>pre.src-javascript:before {
    content: 'Javascript'
}
.org-src-container>pre.src-julia:before {
    content: 'Julia';
}
.org-src-container>pre.src-latex:before {
    content: 'LaTeX';
}
.org-src-container>pre.src-ledger:before {
    content: 'Ledger';
}
.org-src-container>pre.src-ly:before {
    content: 'Lilypond';
}
.org-src-container>pre.src-lisp:before {
    content: 'Lisp';
}
.org-src-container>pre.src-lua:before {
    content: 'Lua';
}
.org-src-container>pre.src-makefile:before {
    content: 'Make';
}
.org-src-container>pre.src-mathematica:before {
    content: 'Mathematica';
}
.org-src-container>pre.src-mathomatic:before {
    content: 'Mathomatic';
}
.org-src-container>pre.src-matlab:before {
    content: 'MATLAB';
}
.org-src-container>pre.src-max:before {
    content: 'Maxima';
}
.org-src-container>pre.src-csharp:before {
    content: 'Mono';
}
.org-src-container>pre.src-vbnet:before {
    content: 'Mono';
}
.org-src-container>pre.src-oz:before {
    content: 'Mozart';
}
.org-src-container>pre.src-mscgen:before {
    content: 'Mscgen';
}
.org-src-container>pre.src-js:before {
    content: 'Node.js';
}
.org-src-container>pre.src-ocaml:before {
    content: 'OCaml';
}
.org-src-container>pre.src-octave:before {
    content: 'Octave';
}
.org-src-container>pre.src-org:before {
    content: 'Org mode';
}
.org-src-container>pre.src-perl:before {
    content: 'Perl';
}
.org-src-container>pre.src-php:before {
    content: 'PHP';
}
.org-src-container>pre.src-picolisp:before {
    content: 'Picolisp';
}
.org-src-container>pre.src-plantuml:before {
    content: 'PlantUML';
}
.org-src-container>pre.src-processing:before {
    content: 'Processing'
}
.org-src-container>pre.src-python:before {
    content: 'Python';
}
.org-src-container>pre.src-R:before {
    content: 'R';
}
.org-src-container>pre.src-redis:before {
    content: 'Redis';
}
.org-src-container>pre.src-ruby:before {
    content: 'Ruby';
}
.org-src-container>pre.src-rust:before {
    content: 'Rust';
}
.org-src-container>pre.src-sass:before {
    content: 'Sass';
}
.org-src-container>pre.src-scala:before {
    content: 'Scala';
}
.org-src-container>pre.src-scheme:before {
    content: 'Scheme';
}
.org-src-container>pre.src-sh:before {
    content: 'sh';
}
.org-src-container>pre.src-shell:before {
    content: 'shell';
}
.org-src-container>pre.src-shen:before {
    content: 'Shen';
}
.org-src-container>pre.src-smiles:before {
    content: 'SMILES';
}
.org-src-container>pre.src-spice:before {
    content: 'SPICE';
}
.org-src-container>pre.src-sql:before {
    content: 'SQL';
}
.org-src-container>pre.src-sqlite:before {
    content: 'SQLite';
}
.org-src-container>pre.src-stan:before {
    content: 'Stan';
}
.org-src-container>pre.src-stata:before {
    content: 'Stata';
}
.org-src-container>pre.src-sclang:before {
    content: 'SuperCollider';
}
.org-src-container>pre.src-tcl:before {
    content: 'Tcl';
}
.org-src-container>pre.src-vala:before {
    content: 'Vala';
}
.org-src-container>pre.src-eukleides:before {
    content: 'ΕΥΚΛΕΙΔΗΣ';
}
.org-src-container>pre.src-vbnet:before {
    content: 'VB.Net';
}

[whatacold]

@doolio,

Thanks, it looks much better with your CSS.

P.S. detailed steps to add custom CSS on Anki:

1. click the "Browse" menu on the top on the Anki main window
2. select the Deck on the left of the new window, then click "Cards"
3. add CSS in the box below "Styling" in the new window

[doolio]

Glad to hear it.

[drdrjacobs]

As @doolio was saying, the syntax highlighting from the org mode source block should automatically export to Anki without having to add any CSS in the card template. If this is not working, you may need to install the htmlize package. See:

https://stackoverflow.com/questions/24082430/org-mode-no-syntax-highlighting-in-exported-html-page

This fixed the issue in my case.

[whatacold]

@drdrjacobs You're right, it works perfectly after installing the htmlize package (with org-html-htmlize-output-type being inline-css), thank you!