Skip to content

Instantly share code, notes, and snippets.

@cuibonobo

cuibonobo/documentation.html

Last active May 23, 2021 20:49
Show Gist options
  • Save cuibonobo/58eb34caaeadc16f3ed2056a3c8301e1 to your computer and use it in GitHub Desktop.
Save cuibonobo/58eb34caaeadc16f3ed2056a3c8301e1 to your computer and use it in GitHub Desktop.
Download ZIP
A simple documentation boilerplate
Raw
documentation.html
<html>
<head>
<title>Documentation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/base-min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mermaid/6.0.0/mermaid.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/styles/atom-one-light.min.css">
<style type="text/css">
body {
background-color: #fafafa;
}
.wrapper {
max-width: 40rem;
height: 100%;
margin-right: auto;
margin-left: auto;
background-color: #fefefe;
border-right: 1px solid #eee;
border-left: 1px solid #eee;
}
.content {
padding: 2rem;
}
g.node[title]{
cursor: pointer;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">
<div class="markdown">
# Heading
A paragraph.
</div>
<div class="mermaid">
%% Example diagram
graph LR
A[Square Rect] -- Link text --> B((Circle))
A --> C(Round Rect)
B --> D{Rhombus}
C --> D
C --> E[Dangling]
click A "http://www.github.com" "This is a tooltip for a link"
</div>
<div class="markdown">
* here is a thing
* here is another thing
* the last thing
``` python
import os
for file in os.listdir(os.getcwd()):
print(file)
```
</div>
</div>
</div>
<!--
No touchy
-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/8.2.1/markdown-it.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/6.0.0/mermaid.min.js"></script>
<script tyoe="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/highlight.min.js"></script>
<script type="text/javascript">
// Mermaid configuration
var config = {
startOnLoad: true,
flowchart:{
useMaxWidth: false,
htmlLabels: true
}
};
mermaid.initialize(config);
// Markdown Rendering
window.onload = function(){
var md = window.markdownit();
var els = document.getElementsByClassName("markdown");
for (var i = 0; i < els.length; i++){
els[i].innerHTML = md.render(els[i].innerHTML);
}
// Syntax highlighting
hljs.initHighlighting();
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment