Comments (9)
@drdrjacobs You're right, it works perfectly after installing the htmlize package (with org-html-htmlize-output-type
being inline-css
), thank you!
from anki-editor.
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
from anki-editor.
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.
from anki-editor.
@doolio Hi, why doesn't it work for me? I confirmed that the value of org-html-htmlize-output-type
is inline-css
.
from anki-editor.
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.
from anki-editor.
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';
}
from anki-editor.
Thanks, it looks much better with your CSS.
P.S. detailed steps to add custom CSS on Anki:
- click the "Browse" menu on the top on the Anki main window
- select the Deck on the left of the new window, then click "Cards"
- add CSS in the box below "Styling" in the new window
from anki-editor.
Glad to hear it.
from anki-editor.
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.
from anki-editor.
Related Issues (20)
- Match org headings escaped with a `,` (needed within org source blocks) HOT 1
- Status of this package and a way ahead HOT 15
- Pushing cloze fails with unknown reason HOT 10
- Is there a recommended workflow for deleting a card (or set of cards)? HOT 2
- Is anyone still developing this project? I find it very useful HOT 2
- ANKI_NOTE_ID not updated after push HOT 1
- Provide a keymap for the anki-editor-mode HOT 1
- Custom faces for Anki's cloze syntax HOT 1
- Question: Does the sync work in both directions? HOT 1
- Number Cloze deletions with consecutive IDs automatically HOT 1
- Can't push notes on WSL2 HOT 2
- Wrong type argument: integer-or-marker-p, nil (develop branch) HOT 2
- Any way to avoid "cannot create note because it is a duplicate"? HOT 1
- AnkiDroid doesn't support wrapping each lines of display equations in <div>
- pushing tree broke HOT 2
- anki-editor-push-notes creates "two" cards HOT 1
- Superscript issues HOT 2
- Per file properties do not work HOT 1
- SRC block exported even if :exports results is set HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from anki-editor.