-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtemplate.html
161 lines (161 loc) · 6.5 KB
/
template.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>Template</title>
<style>
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
<link rel="stylesheet" href="css/template.css" />
<link rel='icon' href='../images/favicon.svg' type='image/x-icon'/>
<meta name='keywords' content='cheminformatics, computationsl drug design, machine learning, programming, blog, blog posts, samuel homberg, academia, research, Münster'/>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
<![endif]-->
</head>
<body>
<!-- cheminformatics, computationsl drug design, machine learning, programming, blog, blog posts, samuel homberg, academia, research, Münster -->
<div id='wrapper'>
<!-- begin wrapper -->
<!-- Samuel Homberg, 21.JUL.2023 -->
<h1 id="blogpost-template">Blogpost template</h1>
<p class="author-date">
<span class="author">Author:</span> <span class="name"><a
href="../index.html">Samuel Homberg</a></span><br> <span
class="published">Published:</span> <span
class="date">21.JUL.2023</span><br>
</p>
<p>This is a markdown template that may be converted to html using
pandoc. This was also used to alter the .css files to alter the design
for the actual blog entries. The template is kept as pure markdown
(except for two comments at the top with keywords and the date / authro)
which is preprocessed using a python script.</p>
<p>Different markdown elements are shown in the next sections.</p>
<h2 id="basic-markdown-syntax">Basic Markdown Syntax</h2>
<ul>
<li><strong>Bold</strong></li>
<li><em>Italic</em></li>
<li><strong><em>Both</em></strong></li>
<li><code>Inline code</code></li>
</ul>
<blockquote>
<p>Blockquote: Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua.</p>
</blockquote>
<h3 id="lists">Lists</h3>
<ol type="1">
<li>Ordered List
<ol type="1">
<li>abc</li>
<li>cba</li>
<li>bac</li>
</ol></li>
<li>Unordered List
<ul>
<li>xyz</li>
<li>zab</li>
<li>bac</li>
</ul></li>
</ol>
<h3 id="code">Code</h3>
<div class="sourceCode" id="cb1"><pre class="sourceCode py"><code class="sourceCode python"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="co"># techincally this fenced code is also extended syntax</span></span>
<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a><span class="kw">def</span> some_func(arg1: <span class="bu">int</span>, arg2: <span class="bu">int</span>) <span class="op">-></span> <span class="bu">str</span>:</span>
<span id="cb1-3"><a href="#cb1-3" aria-hidden="true" tabindex="-1"></a> var <span class="op">=</span> arg1 <span class="op">+</span> arg2</span>
<span id="cb1-4"><a href="#cb1-4" aria-hidden="true" tabindex="-1"></a> <span class="cf">return</span> <span class="bu">str</span>(var)</span>
<span id="cb1-5"><a href="#cb1-5" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb1-6"><a href="#cb1-6" aria-hidden="true" tabindex="-1"></a>some_func(<span class="dv">1</span>, <span class="dv">3</span>)</span>
<span id="cb1-7"><a href="#cb1-7" aria-hidden="true" tabindex="-1"></a><span class="op">>>></span> <span class="st">'4'</span></span></code></pre></div>
<h3 id="links-images">Links & Images</h3>
<p>Text with an <a
href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">important link</a>
embedded. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua.</p>
<p>Also, here is a picture:</p>
<figure>
<img src="./images/template.gif" alt="Alttext / image description" />
<figcaption aria-hidden="true">Alttext / image description</figcaption>
</figure>
<p>Some more text. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet.</p>
<h2 id="extended-syntax">Extended Syntax</h2>
<h3 id="table">Table</h3>
<table>
<thead>
<tr class="header">
<th>Syntax</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>Header</td>
<td>Title</td>
</tr>
<tr class="even">
<td>Paragraph</td>
<td>Text</td>
</tr>
</tbody>
</table>
<h3 id="tasklist-superscript-subscript-emoji-footnote">Tasklist,
Superscript, Subscript, Emoji, Footnote</h3>
<ul class="task-list">
<li><label><input type="checkbox" />Unticked
box<sub>5</sub></label></li>
<li><label><input type="checkbox" checked="" />Ticked
box<sup>7</sup></label></li>
<li><label><input type="checkbox" checked="" />Text with Footnote. <a
href="#fn1" class="footnote-ref" id="fnref1"
role="doc-noteref"><sup>1</sup></a></label></li>
</ul>
<h3 id="strikethrough-highrule">Strikethrough, Highrule</h3>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita,
no sea takimata sanctus est <del>Lorem ipsum</del> dolor sit amet. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua.</p>
<hr />
<h2 id="these-markdown-features-dont-work">These markdown features don’t
work</h2>
<ul>
<li>Emojis: :joy:</li>
<li>highlight: ===highlight===</li>
</ul>
<aside id="footnotes" class="footnotes footnotes-end-of-document"
role="doc-endnotes">
<hr />
<ol>
<li id="fn1"><p>This is the footnote.<a href="#fnref1"
class="footnote-back" role="doc-backlink">↩︎</a></p></li>
</ol>
</aside>
<footer id='footer'>
<p class='copyright'>© <a href='../index.html'>Homberg</a> 2023. Design: <a href='https://html5up.net'>HTML5 UP</a>.</p>
</footer>
<!-- end wrapper -->
</div>
<div id="back-button-container">
<a id="back-button-anchor" href="index.html">
<img id="back-button" src="../assets/webfonts/circle-arrow-left-solid.svg" alt="Back">
</a>
</div></body>
</html>