HastyMarkup Reference

odrau (42)in #steemit • 6 years ago (edited)

This is the reference page for HastyMarkup. An app that helps you edit your post using primarily HTML Markup. If you have not already done so, read about HastyMarkup Here.

Already have HastyMarkup? Here to learn about the gizmo? Continue Reading...

In addition to using the gui to insert elements into the editor, you can use hotstrings. Your hands never need to leave the keyboard. Simply type the characters of the hotstring and activate it with either the "Tab Key" or "/" All the hotstrings are listed below with their corresponding element. There are some features that are hotstring only, so it doesn't hurt to check them out. If you need to turn off hotstrings because of input conflicts, simply press "pause" to toggle on/off. For a hotstrings cheatsheet: Click Here

Align Left

Syntax:	Icon:	*Hotstring:*
`<div class="pull-left"></div>`		dl

Purpose: Insert a div layer that floats all content to the left.

Editor View:

<div class="pull-left">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
</div>

Preview:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Align Center

Syntax:	Icon:	*Hotstring:*
`<center></center>`		c, cs, ce

Purpose: Insert center tags that align contents to the center of page. Hotstring 'c' will insert starting and ending tags <center></center> 'cs' will insert start tag only <center> 'ce' will insert end tag only </center>

Editor View:

<center>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</center>

Preview:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Align Right

Syntax:	Icon:	*Hotstring:*
`<div class="pull-right"></div>`		dr

Purpose: Insert a div layer that floats all content to the right.

Editor View:

<div class="pull-right">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
</div>

Preview:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Img Float Left

Syntax:	Icon:	*Hotstring:*
`see editor view`		il

Purpose: Shortcut to insert an image within a div float left. Pulls image to left side of screen and if image is small enough, allows text and other content to wrap around.

Editor View:

Preview:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.

Img Float Right

Syntax:	Icon:	*Hotstring:*
`see editor view`		ir

Purpose: Shortcut to insert an image within a div float right. Pulls image to right side of post and if image is small enough, allows text and other content to wrap around.

Editor View:

Preview:

Img Centered

Syntax:	Icon:	*Hotstring:*
`see editor view`		ic

Purpose: Shortcut to insert an image within center tags. Text and other content does not wrap around.

Editor View:

Preview:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Image

Syntax:	Icon:	*Hotstring:*
		i

Purpose: Insert an image.

Editor View:

Preview:

Image w/ Source

Syntax:	Icon:	*Hotstring:*
`see editor view`		is

Purpose: Insert an image with source citation under it.

Editor View:

Preview:

_{Photo by Teddy Kelley on Unsplash}

Link

Syntax:	Icon:	*Hotstring:*
`<a href=""></a>`		l

Purpose: Insert a text based link to a web accessible address.

Editor View:

<a href="Link Url Here">Link Text Here</a>

Preview:

Link Text Here

Link Image

Syntax:	Icon:	*Hotstring:*
`see editor view`		lx

Purpose: Nest an image within a link.

Editor View:

Preview:

Text-Justify

Syntax:	Icon:	*Hotstring:*
`<div class="text-justify"></div>`		dj

Purpose: Insert a div layer that formats text so that each line has equal width (like in newspapers and magazines.)

Editor View:

<div class="text-justify">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
</div>

Preview:

Bold

Syntax:	Icon:	*Hotstring:*
`<b></b>`		b

Purpose: Specifies bold text.

Editor View:

<b>Lorem ipsum</b>

Preview:

Lorem ipsum

Emphasis

Syntax:	Icon:	*Hotstring:*
`<em></em>`		e

Purpose: Specifies emphasized (italic) text.

Editor View:

<em>Lorem ipsum</em>

Preview:
Lorem ipsum

Strikethrough

Syntax:	Icon:	*Hotstring:*
`<del></del>`		st

Purpose: Defines text that has been deleted.

Editor View:

<del>Lorem ipsum</del>

Preview:

~~Lorem ipsum~~

Subscript

Syntax:	Icon:	*Hotstring:*
`<sub></sub>`		sub

Purpose: Defines subscript text. Subscript text appears half a character below the normal line. Can be used multiple times to make smaller text, can also be nested inside headings to reduce size. <h1><sub></sub></h1>

Editor View:

C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>

Preview:
C₆H₁₂O₆

Superscript

Syntax:	Icon:	*Hotstring:*
`<sup></sup>`		sup

Purpose: Defines superscript text. Superscript text appears half a character above the normal line. Useful for making footnotes. Can be used multiple times to make smaller text, can also be nested inside headings to reduce size. <h1><sup></sup></h1>

Editor View:

1<sup>st</sup> 2<sup>nd</sup> footnote<sup>[1]</sup> statement<sup>[clarification needed]</sup>

Preview:

1^st 2^nd footnote^[1] statement^{[clarification needed]}

Preformatted

Syntax:	Icon:	*Hotstring:*
`<pre></pre>`		p

Purpose: Defines preformatted text. It preserves both spaces and line breaks and applies a courier font.

Editor View:

<pre>
P R E F O R M A T T E D
1
  2
    3
</pre>

Preview:

P R E F O R M A T T E D
1
  2
    3

Headings

Syntax:	Icon:	*Hotstring:*
`<h1></h1>`		h1 - 6

Purpose: Define heading text of various sizes ranging from 1 to 6. Sizes can be modified by nesting Subscript or Superscript. (right click to insert within a center tag)

Editor View:

<h3>Lorem ipsum</h3>

Preview:

Lorem ipsum

Unordered List

Syntax:	Icon:	*Hotstring:*
`<ul><li></li></ul>`		ul

Purpose: Creates an unordered list. To insert another list item click the "List Item" icon. For hotstrings see: Special Hotstrings

Editor View:

<ul>
<li>List Item 1</li>
<li>List Item 2</li>
</ul>

Preview:

List Item 1
List Item 2

Ordered List

Syntax:	Icon:	*Hotstring:*
`<ol><li></li></ol>`		ol

Purpose: Creates an ordered list. To insert another list item click the "List Item" icon. For hotstrings see: Special Hotstrings

Editor View:

<ol>
<li>List Item 1</li>
        <ol><li>sub ordered list</li><li>sub ordered list</li></ol>
<li>List Item 2</li>
        <ul><li>sub unordered list</li><li>sub unordered list</li></ul>
</ol>

Preview:

List Item 1

sub ordered list
sub ordered list

List Item 2

sub unordered list
sub unordered list

List Item

Syntax:	Icon:	*Hotstring:*
`<li></li>`		li

Purpose: Adds another list item to an ordered or unordered list. For hotstrings see: Special Hotstrings

Editor View:

<ol>
<li>one</li>
<li>two</li>
<li>three</li>
</ol>

Preview:

one
two
three

Codeblock

Syntax:	Icon:	*Hotstring:*
```		cb

Purpose: Creates a code block to display code and preformatted text.

Editor View:

``` in the line above and below the contents of your code or preformatted text.

Preview:

### Heading 3
<center></center>
<script>
    steem.api.getDiscussionsByBlog()
</script>

Code In-line

Syntax:	Icon:	*Hotstring:*
``		cl

Purpose: Creates an in-line area for code and text - has a highlight effect which becomes more distinct when night-mode is toggled.

Editor View:

Lorem ipsum dolor sit amet, `consectetuer` adipiscing 
`<div class="pull-left"></div>` elit. `function()`

Preview:

Lorem ipsum dolor sit amet, consectetuer adipiscing
<div class="pull-left"></div> elit. function()

Code Tag

Syntax:	Icon:	*Hotstring:*
`<code></code>`		ct

Purpose: Same as in-line code but provides some compatibility between markup and markdown.

Editor View:

<div class="pull-right"><code>``` in-line code ```</code></div>

Preview:

``` in-line code ```

Quote Block

Syntax:	Icon:	*Hotstring:*
`<blockquote></blockquote>`		q

Purpose: Insert a quote block.

Editor View:

<blockquote>"Those who cannot remember the past are condemned to repeat it." - George Santayana</blockquote>

Preview:

"Those who cannot remember the past are condemned to repeat it." - George Santayana

Tables^Markdown

Syntax:	Icon:	*Hotstring:*
`see editor view`		t1-8 & r1-8

Purpose: Creates Markdown tables. Use the drop-down C1-C8 where number specifies column count, first icon inserts table heading and first row, second icon inserts additional rows (insert new rows when editing the last table cell.)

Editor View:

|Heading C1|Heading C2|Heading C3|
|-|-|-|
|Row C1|Row C2|Row C3|

Preview:

Heading C1	Heading C2	Heading C3
Row C1	Row C2	Row C3

Tables^Markup

Syntax:	Icon:	*Hotstring:*
`see editor view`		ut1-8, ur1-8

Purpose: Creates Markup Tables. Added for compatibility and special properties/options that Markdown Tables do not provide. Use the same drop-down as Markdown Tables, but right click insert icons. C1-C8 number specifies column count, first icon inserts table header, second icon inserts a row (insert new rows when editing the last table cell.) See: Special Hotsrings

Editor View:

<table>
<tr>
    <th>Heading C1</th>
    <th>Heading C2</th>
    <th>Heading C3</th>
</tr>
<tr>
    <td>Row C1</td>
    <td>Row C2</td>
    <td>Row C3</td>
</tr>
</table>

Preview:

Heading C1	Heading C2	Heading C3
Row C1	Row C2	Row C3

Insert Space

Syntax:	Icon:	*Hotstring:*
` &ensp;&emsp;`		s, s2, s3

Purpose: Insert a non-breaking space. Adds extra horizontal spacing between text and elements. For example, they can be used to force table column width. Left click icon to insert   Right click to insert &emsp; (ctrl+alt while [L or R] clicking to insert at increments of 5.)

Editor View:

Preview:

Lorem ipsum

Line Break

Syntax:	Icon:	*Hotstring:*
`<br>`		br

Purpose: Inserts a line break. Works no matter the line feed within the editors textarea. (ctrl+alt while clicking to insert at increments of 2.)

Editor View:

Lorem<br>ipsum

Preview:

Lorem
ipsum

Horizontal Rule

Syntax:	Icon:	*Hotstring:*
`<hr>`		hr

Purpose: Inserts a horizontal rule.

Editor View:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<hr>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Preview:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Page Dividers

Syntax:	Icon:	*Hotstring:*
		← gui only

Purpose: Inserts a graphic based page divider. Select style from the drop-down, then press the clipboard icon to insert. Click the gear icon to edit your page dividers in notepad (or your default editor for ini file extension.) Read the instructions in the file to learn how to add/reorder/modify page dividers. Remember to save file, then reload HastyMarkup.
(press: CTRL+ +R)

Page Dividers by @odrau terms:
[You may]
-Use in steem post (commercially) without attribution - although it is appreciated.
[You may not]
-Adapt, remix, transform, and build upon the material to sell or redistribute as your own.

To view starter pack included with hastymarkup by default: Starter Pack
More page dividers coming soon, so follow me! For updates check out: hasty.tools

Snippets

Syntax:	Icon:	*Hotstring:*
`Your Code`		← gui only

Purpose: Snippets allow you to store your repetitive code and text. Think of Snippets as permanent variable clipboards. Select snippet from the drop-down, then press the clipboard icon to insert. Click the gear icon to edit your snippets in notepad (or your default editor for ini file extension.) Read the instructions in the file to learn how to create/modify snippets. Remember to save file, then reload HastyMarkup.
(press: CTRL+ +R)

Tools

Syntax:	Icon:	*Hotstring:*
`None`		CTRL+ +T

Purpose: Provide useful tools for Steemit content creators.

Ty <3

HastyMarkup is free to use. Although, if you appreciate the use of H.M. you can give back in many ways. I accept

donations, they are not required but are much appreciated. They will enable me to continue developing tools for the community! If you can't or don't want to donate, another way of helping is to share HastyMarkup in your post. To make the process simple there is a button in the GUI. The icon:

can be used to insert a code snippet at the end of your post, again this is not required but appreciated. Be sure to recommend H.M. to all your Steemit friends! Additionally, upvoting this post, resteems, and comments will help too!
Thank You ~odrau

Upvote! -

Resteem! -

Follow Odrau -

Hasty Discord _{This post was edited with HastyMarkup!}

_{Fugue Icons by Yusuke Kamiyamane.}

#hastymarkup #blog #news #new

6 years ago in #steemit by odrau (42)

$0.00

1 vote

Sort:

Trending

[-]

odrau (42) 6 years ago

📌 Reference was made for HastyMarkup v1.
With newer versions things may have changed.

$0.00

STEEM 0.26

TRX 0.11

JST 0.033

BTC 63869.25

ETH 3055.04

USDT 1.00

SBD 3.88

HastyMarkup Reference

Align Left

Align Center

Align Right

Img Float Left

Img Float Right

Img Centered

Image

Image w/ Source

Link

Link Image

Text-Justify

Bold

Emphasis

Strikethrough

Subscript

Superscript

Preformatted

Headings

Lorem ipsum

Unordered List

Ordered List

List Item

Codeblock

Code In-line

Code Tag

Quote Block

TablesMarkdown

TablesMarkup

Insert Space

Line Break

Horizontal Rule

Page Dividers

Snippets

Tools

Ty <3

📌 Reference was made for HastyMarkup v1.With newer versions things may have changed.

Coin Marketplace

Tables^Markdown

Tables^Markup

📌 Reference was made for HastyMarkup v1.
With newer versions things may have changed.