Since the slack channel has been shuttered, the contents of the .md file will just be pasted below for reference.
Some minor updates were also included compared to the initial document.
markdown to html guide – this section does not Export.
The work flow of creating and publishing web content, from draft to incorporation into a (PG) web page.
You can create content directly in Typora using the inbuilt html supported features as documented in the following sections. (just as this document was created.)
Alternatively, you can create content in Word using inbuilt styles for headings. Block elements and inline elements (format) should be limited to those listed below for a clean translation to html.
The document will then need to be passed thru Typora in order to get an acceptable html translation. Save using default
.docx format, since Save As
Web Page, Filtered produces bloated code.
Typora can then import the
.docx format and translate the file into html.
.docx file into Typora from the File menu by using
Import... and review the html preview. Any discrepancies can be investigated by checking
Source Code Mode.
Besides headings h1-h6, these other block elements are well supported and need only styling in PG:
- ordered lists
a code fence
these not so much…
Use these block elements with caution. They are listed with increasing levels of problems.
==wraps table in a figure element, to make it a block?==
- [ ] tasks
- [x] completed tasks
==treats checkbox and text as separate block elements (needs a container with display: flex and align-items: center applied to appear as shown), ‘checked’ keyword doesn’t seem to register in PG, but the box shows up as checked==
==wraps sup around a link w name=‘ref-footnote-1’ pointing to #dfref-footnote-1==
[^1]: text goes here
==wraps 2 divs around a link w name=‘dfref-footnote-1’ at very bottom pointing to #ref-footnote-1… this approach is non-semantic and should be using id rather than [name] attribute==
==works, but adds a script ^^^ w massive amount of unreadable code==
table of contents
==adds div w text “[TOC]”, & nothing else==
Inline (span) Elements:
These in-line elements are well supported and need only styling:
<www.duckduckgo.com> ==makes link with class .url and target _blank (no title)==
doc link ==adds link w name=“typora” and no href to header, then adds link here with href="#typora"… should use id instead==
not so much…
These in-line elements are listed with increasing levels of problems.
==these makes a regular link w target _blank==
ax^2+bx+c ==works, but adds script==
Or use html directly and have it pass thru, such as:
details interactive element
to see more details.
==typora does not process code, such as links, inside an html block==
keyboard command notation
==audio carries thru to html, but does not display in typora live view==
From Typora, a clean html document can be created using
Export HTML(without styles) from the File menu. This html document can then be opened in a text editor (such a VSCode) for selecting parts of the body to transfer into PG. Copy and paste them into PG using the
INSERT CODE feature under the Library panel.
From there, the section of code can be integrated into the PG tree like any other element, using drag and drop. To achieve CSS styling more specific than typography or combinations of general selectors will require the addition of .class names onto the inserted elements.
==WARNING==: These additions could be lost if there are any major rewrites of the content later on, where this process is repeated.
Tip: In PG, leave
Auto-Formating turned on from the Settings menu to avoid the html running all together once pasted in.