Typora is a powerful adjunct to PG for content creation

Editing
1

Creating content separate from PG is easier than trying to shoehorn your thoughts into different boxes on a webpage layout in PG.

The tool that best fills this need for me seems to be Typora.

It offers a “live view” of the rendered code and large set of format options for the semantic flow of your markup as well as an “outline” view for organizing your thoughts in greater context.

pasting the final draft into PG for last touches of styling and layout organization makes the best use of both tools, in my (limited) experience.

I’ve documented the workflow process as i went and I’m including the markdown file here in case anyone else finds it useful.

The Workflow.md document walks you thru the various features and organizes the Block and Inline elements according to how well they transfer to PG. Some features, while powerful, do not lend themselves to clean markup – which was my aim.

NOTE: Apparently the PG forum will not let me upload a .md file so i’ve posted it on the slack channel where you can download it.

https://pinegrow-webeditor.slack.com/archives/C075YQB5F/p1573414445067000

DISCLAIMER: I am not affiliated with Typora in anyway.

2

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.

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
WORKFLOW
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

markdown to html guide – this section does not Export.

Work Flow

The work flow of creating and publishing web content, from draft to incorporation into a (PG) web page.

Content Creation

Typora

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.)

Word

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.

Import the .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.

Block Elements

Besides headings h1-h6, these other block elements are well supported and need only styling in PG:

block quotes

  • unordered lists
  1. ordered lists
a code fence

horizontal rule

these not so much…

Use these block elements with caution. They are listed with increasing levels of problems.

tables with
data here

==wraps table in a figure element, to make it a block?==

  • tasks
  • 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==

footnotes[1]
==wraps sup around a link w name=‘ref-footnote-1’ pointing to #dfref-footnote-1==

==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==
$$
a x^2+bx+c
$$
==works, but adds a script ^^^ w massive amount of unreadable code==

table of contents

[TOC]

==adds div w text “[TOC]”, & nothing else==

Inline (span) Elements:

These in-line elements are well supported and need only styling:

  • strong

  • em

  • u

  • del

  • ^sup^

  • ~sub~

  • ==mark==

  • code

  • ying

  • ext link

  • <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==

Direct HTML

Or use html directly and have it pass thru, such as:

details interactive element

click me to see more details.

==typora does not process code, such as links, inside an html block==

keyboard command notation

ctrl+F9

abbreviation

WHO

inline video

inline audio

==audio carries thru to html, but does not display in typora live view==

Transferring Content

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.

  1. text goes here ↩︎