Skip to content

Instantly share code, notes, and snippets.

@JohnL4
Created November 12, 2018 22:06
Show Gist options
  • Save JohnL4/ca4031c8440f9c3c4dd3cd89d71cb483 to your computer and use it in GitHub Desktop.
Save JohnL4/ca4031c8440f9c3c4dd3cd89d71cb483 to your computer and use it in GitHub Desktop.
org-mode templates, css, etc.

Notes on org-mode text markup

Overview

I’ve gotten in the habit of using org-mode to organize text notes I take at various times. org-mode files can be transformed to a number of formats, including HTML.

Org-mode explainer

Text markup. More stars in header means lower-level items. Blank lines between paragraphs. Indentation doesn’t matter (except for lists).

Simple formatting

bold italic verbatim code (probably should use verbatim instead of code, because “code” has some weighted meanings in org-mode (e.g., you can run code straight out of an org-mode file)).

Subscript: H2O (so don’t paste in code_with_underscores w/out surrounding it with =’s). (Superscript: E = mc^2.)

one-line code sample (leading colon)
ok, maybe two lines
Multi-line example
like maybe a pasted email
or something you don't want line-wrapping or other /character interpretation/ applied to

Lists

Bullet lists:

  • one
  • two
    • sub-item (indentation matters here)

Definitions:

terms
Can be defined

Checklists:

  • [ ] Items can be…
  • [X] …checked off
  • [-] And (dash means “partially completed”)
    • [X] you can have sublists
    • [ ] if you really want to

Links

Internal link.

Link to Google (although just pasting in a URL works fine, too (see “more info”, below)).

(Link syntax is link text to be displayed to user. You can leave the link text out.)

More info

Maintaining org-mode files without emacs

If you want to update the contents of org-mode files and you’re not an emacs user (i.e., you’re a normal person), you might be able to use pandoc (https://pandoc.org/) to render the text file to whatever format you like.

See *On processing org-mode files with Pandoc.

(You might also be able to do it by installing emacs and using it as a command-line processor, but I haven’t figured that out quite yet.)

Alternatively, you can just DELETE the generated HTML file (including in any repositories where it exists) and update this text file without attempting to regenerate the HTML. In the end, it’s just text.

On processing org-mode files with Pandoc

There is a program, pandoc (https://pandoc.org/), which can be used to turn this org-mode file into whatever you want.

If you do use Pandoc, try the following command line:

pandoc --from=org --to=html5 --standalone --table-of-contents --toc-depth=6 --variable=secnumdepth:6 --number-sections --include-in-header=pandoc-header-extra.html --output=<output-html-file> <this-file>
body {
/* Include fonts via lines like the following in the html head (just pick one):
* <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono|IBM+Plex+Sans" rel="stylesheet">
* <link href="https://fonts.googleapis.com/css?family=Asap" rel="stylesheet">
* <link href="https://fonts.googleapis.com/css?family=Chivo|Source+Sans+Pro" rel="stylesheet">
*/
font-family: 'IBM Plex Sans', sans-serif;
/* font-family: 'Asap', sans-serif; */
/* font-family: 'Source Sans Pro', sans-serif; */
}
pre, code {
font-family: 'IBM Plex Mono', monospace;
font-size: smaller;
}
pre {
}
body { margin-left: 7%; }
/* h1 is doc title */
h1, h2, h3 { margin-left: -6%; }
h4 { margin-left: -3%; }
h5, h6, h7, h8, h9, h10 { font-size: 1em; font-weight: bold; }
.title { text-align: center; }
.todo { color: magenta /*#FF0090*/ /*red*/; }
.done { color: green; }
.tag { background-color: #add8e6; font-weight:normal }
.target { }
.timestamp { color: #8681B2; font-style: italic; }
.timestamp-kwd { color: #5f9ea0; }
p.verse { margin-left: 3% }
pre.src, pre.example { background-color: #F3F5F7; overflow: auto;}
pre.src:before { top: 10px; } /* overrides -10px, to bring box into pre box, so 'overflow: auto;' won't clip it */
pre.src-csharp:before { content: 'C#'; }
pre.src-css:before { content: 'CSS'; }
pre.src-haskell:before { content: 'Haskell'; }
pre.src-javascript:before { content: 'JavaScript'; }
pre.src-powershell:before { content: 'PowerShell'; }
pre.src-sql:before { content: 'SQL'; }
pre.src-typescript:before { content: 'TypeScript'; }
pre.src-vbnet:before { content: 'VB.Net'; }
pre.src-xml:before { content: 'XML'; }
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono|IBM+Plex+Sans" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="org-mode.css" />

Notes for <Project Foo>

Overview

Reproduction

Current Architecture/Issues

Fix

Checkin

Notes

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment