Skip to content

Instantly share code, notes, and snippets.

@maikelthedev

maikelthedev/wiki2html.sh

Last active December 17, 2022 22:27
Show Gist options
  • Save maikelthedev/54a91c21ed9623705fdce7bab2989742 to your computer and use it in GitHub Desktop.
Save maikelthedev/54a91c21ed9623705fdce7bab2989742 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
wiki2html.sh
# This is heavily based in the code here:
# https://gist.github.com/enpassant/0496e3db19e32e110edca03647c36541
# Special thank you to the user enpassant for starting it https://github.com/enpassant
#!/bin/bash
SYNTAX="$2"
EXTENSION="$3"
OUTPUTDIR="$4"
INPUT="$5"
# Added ones
TEMPLATE_PATH="$7"
TEMPLATE_DEFAULT="$8"
TEMPLATE_EXT="$9"
ROOT_PATH="${10}"
[[ "$ROOT_PATH" = "-" ]] && ROOT_PATH=''
FILE=$(basename "$INPUT")
FILENAME=$(basename "$INPUT" ."$EXTENSION")
FILEPATH=${INPUT%$FILE}
OUTDIR=${OUTPUTDIR%$FILEPATH*}
OUTPUT="$OUTDIR"/$FILENAME
CSSFILENAME=$(basename "$6")
FULL_TEMPLATE="$TEMPLATE_PATH/$TEMPLATE_DEFAULT$TEMPLATE_EXT"
HAS_MATH=$(grep -o "\$\$.\+\$\$" "$INPUT")
if [ -n "$HAS_MATH" ]; then
MATH="--mathjax=https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"
else
MATH=""
fi
# >&2 echo "MATH: $MATH"
sed -r 's/(\[.+\])\(([^)]+)\)/\1(\2.html)/g' <"$INPUT" | pandoc $MATH --template="$FULL_TEMPLATE" -f "$SYNTAX" -t html -c "$CSSFILENAME" -M root_path:"$ROOT_PATH" | sed -r 's/<li>(.*)\[ \]/<li class="todo done0">\1/g; s/<li>(.*)\[X\]/<li class="todo done4">\1/g' > /tmp/crap.html
# With this you can have ![pic of sharks](file:../sharks.jpg) in your markdown file and it removes "file"
# and the unnecesary dot html that the previous command added to the image.
sed 's/file://g' < /tmp/crap.html | sed 's/jpg.html/jpg/g' > "$OUTPUT.html"
@maikelthedev
Copy link
Author

To make it work in Pandoc properly I also created a template for it.

<html>
<head>
<title>$title$</title>
<link rel="stylesheet" href="$root_path$$css$">
<meta http-equiv="Content-Type" content="text/html">
</head>
<body>
<div>
    <a href="$root_path$index.html">Wiki</a> > $title$
    </div>
<hr />
$body$
<hr />
<div>
    <a href="$root_path$index.html">Wiki</a> > $title$
      </ol>
    </div>
	</div>
</body>
</html>

If you notice the changes are pretty much basic. It's all about replacing % with $ so Pandoc can read it.

@maikelthedev
Copy link
Author

In case anyone needs my vim config to make this work:

let g:vimwiki_list = [{
  \ 'auto_export': 1,
  \ 'automatic_nested_syntaxes':1,
  \ 'path_html': '$HOME/Sync/wiki_html',
  \ 'path': '$HOME/Sync/wiki',
  \ 'template_path': '$HOME/Sync/wiki/template/',
  \ 'syntax': 'markdown',
  \ 'ext':'.md',
  \ 'template_default':'markdown',
  \ 'custom_wiki2html': '$HOME/Sync/wiki2html.sh',
  \ 'template_ext':'.html'
\}]

au BufRead,BufNewFile *.md set filetype=vimwiki

let g:taskwiki_sort_orders={"C": "pri-"}
let g:taskwiki_syntax = 'markdown'
let g:taskwiki_markdown_syntax='markdown'
let g:taskwiki_markup_syntax='markdown'

@matthjes
Copy link

matthjes commented Mar 29, 2019 •
edited
Loading

Hi,

I've downloaded your script, created the template file (as /doc/Dropbox/wiki/template/markdown.html) and copied your configuration, however, I get the following error when I try to generate the html files:

/home/mj/doc/Dropbox/wiki/wiki2html.sh: line 42: /index.html: Permission denied^@
Vimwiki: HTML conversion is done, output: /home/mj/doc/Dropbox/wiki/wiki_html/

Looks like the output path is missing. Do you have any idea what could be wrong here?

@rattletat
Copy link

How do you specify the $title$? The automatic title setting by vimwiki is not recognized and when doing something like %title Bla it prints title Bla instead of Bla.

@rattletat
Copy link

Here is an updated version for HTML5: Link
I use it with this template which is quite nice.

@kaimingguo
Copy link

Hi,
You can add this [^\(!\)] before the command, you can filter out images link. like ![image text](file://...png).

sed -r s/[^\(!\)](\[.+\])\(([^#)]+)\)/\1(\2.html)/g < "$INPUT" | ...

@artkpv
Copy link

artkpv commented Dec 11, 2019

@rattletat

Here is an updated version for HTML5: Link
I use it with this template which is quite nice.

Your link is broken. What is the template you used?

@rattletat
Copy link

rattletat commented Dec 12, 2019 •
edited
Loading

@artkpv Sorry, had a namechange in the meantime.

Here the script:
https://gist.github.com/rattletat/4a1098d5c1e7c8db1fe52d4740076808

And here is the template:
https://github.com/tajmone/pandoc-goodies/tree/master/templates/html5/github

Although I'm not using regex1 anymore for some reason. If you improve it, please tell me :)

@giddie
Copy link

giddie commented Jan 6, 2020 •
edited
Loading

I'm just getting my VimWiki set up, and this is fantastically useful. Thank you :)

Do you auto-generate TOCs at all? If so, how do you go about it? I can see the $toc$ placeholder in the template, but I'm missing the magic sauce that generates the content.

Edit: Also, I'm having to press <enter> again after saving the file. Any idea how to avoid that unless pandoc errored?

"index.md" 20L, 522C written

Press ENTER or type command to continue_

@rattletat
Copy link

@giddie

I haven't used the toc parameter, but regarding the enter issue see here:
vimwiki/vimwiki#780

So this should be fixed as soon as dev is merged into the master branch.

@giddie
Copy link

giddie commented Jan 7, 2020

Thanks; that's good to know.

I've been able to get TOC working with the help of a few threads (linked below). Basically, the trick is:

  • Replace $toc$ in the template with $table-of-contents$
  • Add --toc to the pandoc command line in the conversion script.
  • Add toc: false to the metadata for files where a TOC is not required.

Unfortunately, it seems that the toc metadata cannot be defaulted to false. This isn't a big deal for me, since I don't have many documents yet. However, it should be possible to handle this in the export script by looking for a regex match and adding the --toc argument conditionally.

References:

@artkpv
Copy link

artkpv commented Jan 9, 2020 •
edited
Loading

@rattletat Thanks! It works :)

There are two issues I have now. First is that it warns me about empty title. And second, how to make a link to my index.html page while I have folders hence it needs to be relative, without modifying each markdown file.

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