How to combine 5 important math constants to a short formula
21 |
Max Muster1, Lisa Master2
22 |
1Hochschule Gartenstadt 2Universität Übersee
23 |
May 2021
24 |
Keywords: markdown+math, VSCode, static page, publication, LaTeX, math
25 |
26 |
27 |
28 |
Abstract
29 |
Euler's identity makes a valid formula out of five mathematical constants.
30 |
1. Introduction
31 |
Euler's identity is often cited as an example of deep mathematical beauty.
32 | Three basic arithmetic operations occur exactly once and combine five fundamental mathematical constants [1].
33 |
2. The Identity
34 |
Starting from Euler's formula eix=cosx+isinx for any real number x, we get to Euler's identity with the special case of x=π
35 | eiπ+1=0.(1)
36 |
The arithmetic operations addition, multiplication and exponentiation combine the fundamental constants
37 |
38 |
the additive identity 0.
39 |
the multiplicative identity 1.
40 |
the circle constant π.
41 |
Euler's number e.
42 |
the imaginary constant i.
43 |
44 |
3. Conclusion
45 |
It has been shown, how Euler's identity makes a valid formula from five mathematical constants.
48 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/docs/euler.md:
--------------------------------------------------------------------------------
1 | ---
2 | "lang": "en",
3 | "title": "Euler's Identity",
4 | "subtitle": "How to combine 5 important math constants to a short formula",
5 | "authors": ["Max Muster1", "Lisa Master2"],
6 | "adresses": ["1Hochschule Gartenstadt","2Universität Übersee"],
7 | "date": "May 2021",
8 | "description": "mdmath LaTeX demo site",
9 | "tags": ["markdown+math","VSCode","static page","publication","LaTeX","math"]
10 | ---
11 | ### Abstract
12 |
13 | Euler's identity makes a valid formula out of five mathematical constants.
14 |
15 | ## 1. Introduction
16 |
17 | Euler's identity is often cited as an example of deep mathematical beauty.
18 | Three basic arithmetic operations occur exactly once and combine five fundamental mathematical constants [[1](#1)].
19 |
20 | ## 2. The Identity
21 |
22 | Starting from Euler's formula $e^{ix}=\cos x + i\sin x$ for any real number $x$, we get to Euler's identity with the special case of $x = \pi$
23 |
24 | $$e^{i\pi}+1=0\,.$$ (1)
25 |
26 | The arithmetic operations *addition*, *multiplication* and *exponentiation* combine the fundamental constants
27 |
28 | * the additive identity $0$.
29 | * the multiplicative identity $1$.
30 | * the circle constant $\pi$.
31 | * Euler's number $e$.
32 | * the imaginary constant $i$.
33 |
34 | ## 3. Conclusion
35 |
36 | It has been shown, how Euler's identity makes a valid formula from five mathematical constants.
37 |
38 | ### References
39 |
40 | [1] [Euler's identity](https://en.wikipedia.org/wiki/Euler%27s_identity)
--------------------------------------------------------------------------------
/docs/euler.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goessner/mdmath/b562f83cf1f427ea74f80dd90b62e3eeec2cad2c/docs/euler.pdf
--------------------------------------------------------------------------------
/docs/img/euler-identity-browser.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goessner/mdmath/b562f83cf1f427ea74f80dd90b62e3eeec2cad2c/docs/img/euler-identity-browser.png
--------------------------------------------------------------------------------
/docs/img/euler-identity.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goessner/mdmath/b562f83cf1f427ea74f80dd90b62e3eeec2cad2c/docs/img/euler-identity.png
--------------------------------------------------------------------------------
/docs/img/publication-settings.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goessner/mdmath/b562f83cf1f427ea74f80dd90b62e3eeec2cad2c/docs/img/publication-settings.png
--------------------------------------------------------------------------------
/docs/img/triangle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goessner/mdmath/b562f83cf1f427ea74f80dd90b62e3eeec2cad2c/docs/img/triangle.png
--------------------------------------------------------------------------------
/docs/publication.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | Web Publications — LaTeX Style
16 |
17 |
18 |
19 |
Web Publications — LaTeX Style
20 |
Give your Web Publications LaTeX Style
21 |
Stefan Gössner1
22 |
1Dortmund University of Applied Sciences. Department of Mechanical Engineering
23 |
May 2021
24 |
Keywords: mdmath, static page, publication, Journal, LaTeX, math
25 |
26 |
27 |
28 |
Abstract
29 |
Now there is an easy way to have both, a possibly interactive, static web page containing math and a scientific print document for documentation and publication,
30 | each looking like a professional LaTeX document. All you need is the popular free, open source Visual Studio Code text editor with its lightweight extension Markdown+Math for managing LaTeX style and math syntax as well as using meanwhile ubiquitous Markdown language. The resulting HTML document already contains prerendered math formulas, so browsers won't have the burden of math rendering via scripting.
There has been an upward trend in using Markdown language not only for web content, but also for student notes, handouts and scientific papers of small to medium size. Markdown source files are benefitial for viewing, editing and archiving content. Additionally we can generate visually pleasing LaTeX style documents from it
56 |
57 |
as HTML pages possibly containing interactive graphics.
58 |
as static PDF print documents.
59 |
60 |
Markdown parsers usually export semantic HTML, i.e. meaningful HTML elements only without using class attributes. Styling those HTML documents is accomplished then by using classless CSS stylesheets [4,5]. Styling semantic HTML with classless CSS ...
61 |
62 |
makes HTML and CSS easy to read and understand.
63 |
results in overall small code size.
64 |
installs no rigid class name dependencies between HTML and CSS.
65 |
66 |
Edward Tufte's conventions for styling papers and handouts are followed here as a guidline [6].
67 |
This paper – styled itself as a LaTeX document – first lists the necessary installation aspects in short. After a tiny example of a LaTeX styled markdown document, it gives a quick overview of Markdown for newcomers. Finally some useful features proposed for scientific publication are explained in more detail.
68 |
Source code of the HTML template and its accompanying class-less CSS file can be found on GitHub [7].
69 |
2. Editor, Math Extension and Configuration
70 |
If you are a programmer, chances are high, that you already have installed and use Visual Studio Code. Otherwise you can install it from here and easily use it as a general non-wysiwyg text editor with excellent Markdown support.
Now from the VSCode Command Palette (Ctrl+Shift+P) run the command Markdown: Save Markdown+Math to HTML or simply press (Ctrl+K,).
94 |
That way we have created an HTML version of our markdown file euler.md named euler.html, both located in the same folder. Viewing it in the browser of your choice gives:
Having this we can generate a print document euler.pdf quite easily using our browser's print to PDF functionality. You can download a version from here for inspection.
100 |
3. Markdown Overview
101 |
According to the CommonMark specification [2], basic Markdown translates into a limited set of semantic HTML elements.
It may be noticeable that not very semantic HTML elements <div> and <span> are missing here. For supporting these list of elements, a small CSS file suffices. Please also take note that Markdown allows to embed plain HTML code when needed.
105 |
3.1 Headings
106 |
Edward Tufte's conventions followed here recommend to use <h1> for the document title only, <h2> for section headings, and <h3> for lower level headings [6]. So for document structuring only two heading levels '##' (<h2>) and '###' (<h3>) are totally sufficient – with reference to famous Feynman lectures on physics [11].
107 |
# Reserved for Document Title `<h1>`
108 | ## Primary Section Headings `<h2>`
109 | ### Secondary Lower Level Headings `<h3>`
110 | #### Not Recommended for Use `<h4> - <h6>`
111 |
112 |
3.2 Paragraph
113 |
Markdown interpretes a sequence of text lines, separated from others by a blank line, as a paragraph and translates it into an HTML <p> element.
114 | In the same way you can't control text wrap with HTML, you cannot do that with Markdown.
115 |
But you might – as an exception to that rule – force a hard line break by using HTML <br> or append at least two trailing spaces at the end of a line.
116 |
3.3 Images
117 |
Markdown images are inline elements with the syntax . These images are displayed side by side.
118 |
If we want to center-align an image and give it a caption, we use the semantic HTML <figure> and <figcaption> elements instead.
119 |
<figure>
120 | <img src="./img/triangle.png">
121 | <figcaption>Fig 1: The right triangle</figcaption>
122 | </figure>
123 |
Images are responsive regarding their size, which we can verify by changing the size of the browser window.
129 |
3.4 Blockquote
130 |
Markdown uses email-style > characters for blockquoting.
131 |
> A human being is part of a whole called by us <q>Universe</q>.
132 | > — Albert Einstein, *A Man of Many Parts*
133 |
134 |
135 |
A human being is part of a whole called by us Universe.
136 | — Albert Einstein, A Man of Many Parts.
137 |
138 |
In scientific documents Theorems, Lemmas and Proofs are frequently written using blockquote syntax in Markdown.
139 |
3.5 Code Blocks
140 |
We can insert preformatted text in code blocks enclosed by three backticks ``` on its own single line each. Immediatelly following the begin-backticks we may specify the language for syntax highlighting.
<figcaption> Table 3: Column alignment </figcaption>
231 |
232 | | Left | Center | Right |
233 | |:---|:---:|--:|
234 | |L|C|R|
235 |
236 |
We can use a simple syntax for tables, which is a popular extension to the CommonMark standard [3]. Inline rules as shown in Table 2 apply to the table cells. Tables as a whole are always center-aligned.
237 | Table 3: Column alignment
238 |
239 |
240 |
241 |
Left
242 |
Center
243 |
Right
244 |
245 |
246 |
247 |
248 |
L
249 |
C
250 |
R
251 |
252 |
253 |
254 |
3.8 Wrapping Text around figures, listings, etc.
255 |
259 |
This is not a Markdown feature. Also text wrapping is controversial discussed regarding its use in scientific papers.
260 | But if you want that, HTML <aside> comes for help.
261 | HTML specification recommends to use <aside> only for content that is indirectly related to the main article content.
262 |
263 |
Note the general fact, that we can use Markdown text inside of HTML block elements, as long as it starts and ends with a blank line.
Math support is the core functionality of mdmath. Inline math r=x2+y2 and display math expressions eix=cosx+isinx are supported, due to markdown-it extension markdown-it-texmath [8] and the fast math renderer KaTeX [9]. Commutative diagrams can be used since mdmath version 2.6
284 | Ab↓⏐CaB⏐↑cD
292 |
... Inline math $r = \sqrt{x^2 + y^2}$ and display math expressions $$e^{ix}=\cos x + i\sin x$$ are supported ... Commutative diagrams can be used since *mdmath* version 2.6
293 |
294 | $$\begin{CD} A @>a>> B \\ @VbVV @AAcA \\ C @= D \end{CD}$$
295 |
296 |
4. Document Structure
297 |
The visual part of exported HTML document is provided by mdmath template themes/publication/theme.js, which has a simple semantic structure:
Your Markdown content will be parsed by markdown-it, the Markdown parser used by VSCode [10]. Resulting HTML output goes then into the <main> section.
304 |
Markdown does not assist you to structure your textual content any further. Especially it does not use HTML <article> and <section> elements. But in fact it doesn't need to, as headings – the remaining structuring elements – are totally sufficient.
305 |
The <header> section contains the paper's title, authors, author addresses, date and keywords. These data are to be found in a Frontmatter metadata section at the beginning of the Markdown file and will also be processed via the template file. The Frontmatter section inside euler.md example has following structure
306 |
---
307 | "lang": "en",
308 | "title": "Euler's Identity",
309 | "subtitle": "How to combine 5 important math constants to a short formula",
310 | "authors": ["Max Muster<sup>1</sup>", "Lisa Master<sup>2</sup>"],
311 | "adresses": ["<sup>1</sup>Hochschule Gartenstadt","<sup>2</sup>Universität Übersee"],
312 | "date": "May 2021",
313 | "description": "mdmath LaTeX demo site",
314 | "tags": ["markdown+math","VSCode","static page","publication","LaTeX","math"]
315 | ---
316 |
317 |
318 |
Note that Frontmatter syntax used here must strictly obey JSON syntax. So it is more restrictive than YAML based Frontmatter syntaxes.
319 |
320 |
mdmath offers a very basic but useful Table Of Content command. While editing Markdown ...
321 |
322 |
Invoke comand Insert Table of Content from Command Palette or press Ctrl+KT.
323 |
Manually remove unwanted ToC entries.
324 |
Done.
325 |
326 |
5. Styling
327 |
In order to approach LaTeX look and feel by Markdown authoring, a pure classless CSS stylesheet is needed. You might want to have a look into mdmath's stylesheet.
Classless CSS + classes for theorem, lemma, proof, ...
354 |
Math rendering via MathJax scripting.
355 |
'Latin Modern Roman' font files.
356 |
357 |
358 |
359 |
All of these stylesheets seem to address handmade HTML exclusively. HTML as Markdown export is not mentioned.
360 |
Vincent Dörig's approach looks very promising. Acknowledgment goes to him for providing the Latin Modern Roman typeface font reused with mdmath.
361 |
6. Conclusion
362 |
HTML output provided by the theme publication of mdmath offers a styling with LaTeX look and feel. With it student notes, handouts and scientific papers can be comfortably authored using the Markdown language, while previewing the result in texteditor VSCode. During the Markdown → HTML conversion process math formulas are converted to browser understandable markup. So no script based math renderer is finally needed on the browser side. In fact no script at all is used within resulting HTML output.
363 |
mdmath addresses small to medium sized documents. However for large work as theses and books, available powerful LaTeX packages or – if you want to stick with Markdown –
364 | Pandoc is highly recommended.
377 |
378 |
379 |
380 |
--------------------------------------------------------------------------------
/docs/publication.md:
--------------------------------------------------------------------------------
1 | ---
2 | "lang": "en",
3 | "title": "Web Publications — LaTeX Style",
4 | "subtitle": "Give your Web Publications LaTeX Style",
5 | "authors": ["Stefan Gössner1"],
6 | "adresses": ["1Dortmund University of Applied Sciences. Department of Mechanical Engineering"],
7 | "date": "May 2021",
8 | "description": "mdmath – how to use LaTex theme with markdown",
9 | "tags": ["mdmath","static page","publication","Journal","LaTeX","math"]
10 | ---
11 | ### Abstract
12 | Now there is an easy way to have both, a possibly interactive, static web page containing math and a scientific print document for documentation and publication,
13 | each looking like a professional LaTeX document. All you need is the popular free, open source [*Visual Studio Code* text editor](https://code.visualstudio.com/) with its lightweight extension [*Markdown+Math*](https://marketplace.visualstudio.com/items?itemName=goessner.mdmath) for managing LaTeX style and math syntax as well as using meanwhile ubiquitous Markdown language. The resulting *HTML* document already contains prerendered math formulas, so browsers won't have the burden of math rendering via scripting.
14 |
15 | ## Content
16 | - [1. Introduction](#1-introduction)
17 | - [2. Editor, Math Extension and Configuration](#2-editor-math-extension-and-configuration)
18 | - [3. Markdown Overview](#3-markdown-overview)
19 | - [3.1 Headings](#31-headings)
20 | - [3.2 Paragraph](#32-paragraph)
21 | - [3.3 Images](#33-images)
22 | - [3.4 Blockquote](#34-blockquote)
23 | - [3.5 Code Blocks](#35-code-blocks)
24 | - [3.6 Inline Markdown](#36-inline-markdown)
25 | - [3.7 Table](#37-table)
26 | - [3.8 Wrapping Text around figures, listings, etc.](#38-wrapping-text-around-figures-listings-etc)
27 | - [3.9 Math Support](#39-math-support)
28 | - [4. Document Structure](#4-document-structure)
29 | - [5. Styling](#5-styling)
30 | - [6. Conclusion](#6-conclusion)
31 | - [References](#references)
32 |
33 |
34 |
35 | ## 1. Introduction
36 |
37 | There has been an upward trend in using Markdown language not only for web content, but also for student notes, handouts and scientific papers of small to medium size. Markdown source files are benefitial for viewing, editing and archiving content. Additionally we can generate visually pleasing LaTeX style documents from it
38 |
39 | * as HTML pages possibly containing interactive graphics.
40 | * as static PDF print documents.
41 |
42 | Markdown parsers usually export semantic HTML, i.e. meaningful HTML elements only without using `class` attributes. Styling those HTML documents is accomplished then by using *classless* CSS stylesheets [[4,5](#4)]. Styling semantic HTML with classless CSS ...
43 |
44 | * makes HTML and CSS easy to read and understand.
45 | * results in overall small code size.
46 | * installs no rigid class name dependencies between HTML and CSS.
47 |
48 | Edward Tufte's conventions for styling papers and handouts are followed here as a guidline [[6](#6)].
49 |
50 | This paper – styled itself as a LaTeX document – first lists the necessary installation aspects in short. After a tiny example of a LaTeX styled markdown document, it gives a quick overview of Markdown for newcomers. Finally some useful features proposed for scientific publication are explained in more detail.
51 |
52 | Source code of the HTML template and its accompanying class-less CSS file can be found on GitHub [[7](#7)].
53 |
54 | ## 2. Editor, Math Extension and Configuration
55 |
56 | If you are a programmer, chances are high, that you already have installed and use [*Visual Studio Code*](https://code.visualstudio.com/). Otherwise you can install it from [here](https://code.visualstudio.com/) and easily use it as a general non-wysiwyg text editor with excellent Markdown support.
57 |
58 | Getting scientific now we install the VSCode extension [markdown+math](https://marketplace.visualstudio.com/items?itemName=goessner.mdmath). You can do it [directly from within VSCode](https://code.visualstudio.com/docs/editor/extension-marketplace) via
59 | ```
60 | View > Extensions
61 | ```
62 | Now in VSCode select the menu entry
63 | ```
64 | File > Preferences > Settings
65 | ```
66 | and switch to the *mdmath* extension Theme `'publication'`.
67 |
68 |
69 |
70 |
71 | Fig 1: Setting theme for LaTeX output.
72 |
73 | Now for verifying, that everything works as expected ...
74 |
75 | * Open a new file in VSCode and save it as `euler.md`.
76 | * Navigate your browser to the example file [`https://raw.githubusercontent.com/goessner/mdmath/master/docs/euler.md`](https://raw.githubusercontent.com/goessner/mdmath/master/docs/euler.md) and copy / paste the markdown text into your open VSCode document.
77 | * Open a preview window to the side (Ctrl+KV).
78 |
79 | You should see something similar to the following yet:
80 |
81 |
82 |
83 |
84 | Fig 2: Markdown Example – Euler's Identity
85 |
86 | Now from the VSCode Command Palette (Ctrl+Shift+P) run the command `Markdown: Save Markdown+Math to HTML` or simply press (Ctrl+K,).
87 |
88 | That way we have created an HTML version of our markdown file `euler.md` named `euler.html`, both located in the same folder. Viewing it in the browser of your choice gives:
89 |
90 |
91 |
92 |
93 | Fig 3: HTML Output – Euler's Identity
94 |
95 | Having this we can generate a print document `euler.pdf` quite easily using our browser's *print to PDF* functionality. You can [download a version from here]() for inspection.
96 |
97 | ## 3. Markdown Overview
98 |
99 | According to the CommonMark specification [[2](#2)], basic Markdown translates into a limited set of semantic HTML elements.
100 |
101 | ```html
102 | ,
80 | 
91 | 
97 | 
126 | 