Open ghost opened 2 years ago
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
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.
@doolio Hi, why doesn't it work for me? I confirmed that the value of org-html-htmlize-output-type
is inline-css
.
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.
Hi, why doesn't it work for me? I confirmed that the value of
org-html-htmlize-output-type
isinline-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';
}
@doolio,
Thanks, it looks much better with your CSS.
P.S. detailed steps to add custom CSS on Anki:
Glad to hear it.
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.
@drdrjacobs You're right, it works perfectly after installing the htmlize package (with org-html-htmlize-output-type
being inline-css
), thank you!
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