# Typora is a powerful adjunct to PG for content creation **URL:** \ **Category:** Editing\ **Tags:** tutorial\ **Created:** [November 10, 2019, 7:38pm UTC](https://forum.pinegrow.com/t/typora-is-a-powerful-adjunct-to-pg-for-content-creation/3512 "2019-11-10T19:38:22Z")\ **Posts on this page:** 2\ **Page:** 1
**Author:** ![droidgoo](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/droidgoo/32/2209_2.png) [@droidgoo](https://forum.pinegrow.com/u/droidgoo)\ **Post date:** [November 10, 2019, 7:38pm UTC](https://forum.pinegrow.com/t/typora-is-a-powerful-adjunct-to-pg-for-content-creation/3512/1 "2019-11-10T19:38:22Z")
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](https://pinegrow-webeditor.slack.com/archives/C075YQB5F/p1573414445067000) DISCLAIMER: I am not affiliated with Typora in anyway. ---
**Author:** ![droidgoo](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/droidgoo/32/2209_2.png) [@droidgoo](https://forum.pinegrow.com/u/droidgoo)\ **Post date:** [February 21, 2020, 8:44pm UTC](https://forum.pinegrow.com/t/typora-is-a-powerful-adjunct-to-pg-for-content-creation/3512/2 "2020-02-21T20:44:49Z")
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 ```auto 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](http://example.com/ "title is optional") 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]( "images") - [ext link](http://example.com/ "title is optional") - \<[www.duckduckgo.com](http://www.duckduckgo.com)\> ==makes link with class .url and target \_blank (no title)== - [doc link](#Typora "title is optional") ==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. - [ref link](http://example.com/ "title is optional") - [use the duck](http://duckduckgo.com "the duck") ==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