https://goessner.github.io/mdmath/publication.html Web Publications -- LaTeX Style Give your Web Publications L`a'T`e'X Style Stefan Gossner^1 ^1Dortmund University of Applied Sciences. Department of Mechanical Engineering May 2021 Keywords: mdmath, static page, publication, Journal, LaTeX, math Abstract 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, 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. Content * 1. Introduction * 2. Editor, Math Extension and Configuration * 3. Markdown Overview + 3.1 Headings + 3.2 Paragraph + 3.3 Images + 3.4 Blockquote + 3.5 Code Blocks + 3.6 Inline Markdown + 3.7 Table + 3.8 Wrapping Text around figures, listings, etc. + 3.9 Math Support * 4. Document Structure * 5. Styling * 6. Conclusion * References 1. Introduction 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 * as HTML pages possibly containing interactive graphics. * as static PDF print documents. 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 ... * makes HTML and CSS easy to read and understand. * results in overall small code size. * installs no rigid class name dependencies between HTML and CSS. Edward Tufte's conventions for styling papers and handouts are followed here as a guidline [6]. 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. Source code of the HTML template and its accompanying class-less CSS file can be found on GitHub [7]. 2. Editor, Math Extension and Configuration 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. Getting scientific now we install the VSCode extension markdown+math. You can do it directly from within VSCode via View > Extensions Now in VSCode select the menu entry File > Preferences > Settings and switch to the mdmath extension Theme 'publication'. [publicatio] Fig 1: Setting theme for LaTeX output. Now for verifying, that everything works as expected ... * Open a new file in VSCode and save it as euler.md. * Navigate your browser to the example file https:// raw.githubusercontent.com/goessner/mdmath/master/docs/euler.md and copy / paste the markdown text into your open VSCode document. * Open a preview window to the side (Ctrl+K V). You should see something similar to the following yet: [euler-iden] Fig 2: Markdown Example - Euler's Identity Now from the VSCode Command Palette (Ctrl+Shift+P) run the command Markdown: Save Markdown+Math to HTML or simply press (Ctrl+K ,). 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: [euler-iden] Fig 3: HTML Output - Euler's Identity 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. 3. Markdown Overview 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 
         and
 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.

3.1 Headings

Edward Tufte's conventions followed here recommend to use 
         for
the document title only, 
         for section headings, and 
         for
lower level headings [6]. So for document structuring only two
heading levels '##' (
        ) and '###' (
        ) are totally sufficient -
with reference to famous Feynman lectures on physics [11].

# Reserved for Document Title `
        `
## Primary Section Headings `
        `
### Secondary Lower Level Headings `
        `
#### Not Recommended for Use `
         - 
        `

3.2 Paragraph

Markdown interpretes a sequence of text lines, separated from others
by a blank line, as a paragraph and translates it into an HTML 
        
element. In the same way you can't control text wrap with HTML, you
cannot do that with Markdown.

But you might - as an exception to that rule - force a hard line
break by using HTML 
         or append at least two trailing spaces at
the end of a line.

3.3 Images

Markdown images are inline elements with the syntax ![alt text](/path
/to/img "title"). These images are displayed side by side.

If we want to center-align an image and give it a caption, we use the
semantic HTML 
         and 
         elements instead.


        
  
  
        Fig 1: The right triangle
        

        

[triangle] Fig 4: Right triangle

Images are responsive regarding their size, which we can verify by
changing the size of the browser window.

3.4 Blockquote

Markdown uses email-style > characters for blockquoting.

> A human being is part of a whole called by us Universe.  
> — Albert Einstein, *A Man of Many Parts*

    A human being is part of a whole called by us `Universe'.
    -- Albert Einstein, A Man of Many Parts.

In scientific documents Theorems, Lemmas and Proofs are frequently
written using blockquote syntax in Markdown.

3.5 Code Blocks

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.

```js
function print({x=0,y=0}) {
    return `(${x},${y}`;
};
```

        Listing 1: JavaScript function
        


         heading might be comfortably used as a code block
caption.

function print({x=0,y=0}) {
    return `(${x},${y}`;
};
console.log(print({x:3,y:4}));

Listing 1: JavaScript function

3.6 Inline Markdown

Besides regular Markdown inline rules there are some beneficial HTML
inline elements.

Table 2: Some Inline Markdown / Markup

             Markdown / Markup                        Result
*italic text*                                italic text
**strong text**                              strong text
***strong italic text***                     strong italic text
~~strike through~~                           [S:strike through:S]

underlining                           underlining
Superscript                       Super^script
Subscript                         Sub[script]
Small text for fine print     Small text for fine
                                             print
Alt+Ctrl Del
CSS
Hilite text with mark           Hilite text with mark
Hard line
        break *                         Hard line
                                             break
... quotation ...                     `... quotation ...'
... citation ...                ... citation ...



3.7 Table


         Table 3: Column alignment 
        

| Left | Center | Right |
|:---|:---:|--:|
|L|C|R|

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.

Table 3: Column alignment

Left Center  Right
L    C       R

3.8 Wrapping Text around figures, listings, etc.

aside image

Fig. 6: Triangle aside

This is not a Markdown feature. Also text wrapping is controversial
discussed regarding its use in scientific papers. But if you want
that, HTML