Completing the inference of Markdown with "Workarounds".

This is part 4 of a 4 part training, entitled: How to use Markdown as a tool when writing and publishing to WordPress.

Native Markdowm is not complete, but it does allow the use of raw HTML in order to render the text into a functional format. Some of the changes include, sitzing, font-family, color, style and the aligning of images.

So I have included some "Workarounds" to complete the rendering. These workarounds use HTML directly. Most markdown processors support HTML content within a markdown document.

So let's get started with the workarounds. The first of these, the span element utilize the in-line features. The second, the block element, utilize features. The third set covers the remainder of the needed changes.

_.

Span,

A span allows you to separate things from the other elements around them on a page or within a document, it does not cause a line break. This is why it is perfect for in-line styling, like coloring a single word in a sentence to draw more attention to it.

In-line style

< span style="font-size: 16pt;">the text you want resized

< span style="font-family: Arial;">the text you want to change

< span style="color: blue or #0000FF;">the text you want to color/change

< span style="style: n_style, i.e., italic;"> the text you want to emphasize *Remember, you also use asterik's andunderscore's or ~ tilde's , for style changes._

You can also use.

< i>italiacs< /i>

< b>bold< /b>

< u>underline< /u>

NOTE: In the above I have added an extra space folowing the < to get Markdown syntax to render in the final rendering.

Div

A div, by default, creates a line break because it is used to make separate line for containers or boxes (block) within a page or document, So the proper way to use a div is as a container element, rather than an inline styling element.

< div style="float: right;">

§Some editors then save the code in one line, such as PrettyPress, a plug-in for WordPress.

< div style="text-align:center;">

< /div>

< span style="text-align:center;">

< /span>

These two (above) will insert your image in the center of the page or post. Even though one is of an in-line style being that you are aligning the image in a separate line or paragraph. NOTE: In the above I have added an extra space folowing the < to get Markdown syntax to render in the final rendering.

| I am text to the left |

| I am text to the right |

These Two preceding styles are table-ish in nature, in that they use the pipes (bars) to create the alignment of images. In what is consideered ugly Markdown syntax; but works, in a sense. The pipes are visible in the final rendering,

< center>Centered text< /center>

This is above alternative syntax will also work for centering both iext and images. NOTE: In the above I have added an extra space folowing the < to get Markdown syntax to render in the final rendering.

I use [ Google][ 1] more than [ Yahoo][ 2] or [ Bing][ 3].

[1]: \http://www. google.com/ "Google Search" [2]: \http://www.yahoo.com/ "Yahoo Search" [3]: \http://www.bing.com/ "Bing Search"

This (above) is one way to format lots of text links. Place brackets around the text you want clickable, and then add corresponding numbers in this format. NOTE: In the above I have added an extra space folowing the < to get Markdown syntax to render in the final rendering.

< p style="text-align: left;">Left aligned< /p>

< p style="text-align="right"> < img src="http://tinyurl.com/j3wrmbp" /> < /p>

The above 2 are alternatives for text and images. NOTE: In the above I have added an extra space folowing the < to get Markdown syntax to render in the final rendering.

To make an image into a clickable link to a web page you need the URL for the link and the URL for the image. [![alt text][ 2]][ 1]

Alternative Syntax

< p align="right"> < img src=\path/file.jpg or URL> < /p>

< img align="right" src="http://goo.gl/YmK1BN">

NOTE: In the above I have added an extra space folowing the < to get Markdown syntax to render in the final rendering.

These alternative syntax's can be used for images, just note that they have the same properties as a "float".

< p style="text-align: left;">Left aligned

< p style="text-align="right"> < img src="http://tinyurl.com/j3wrmbp" /> < /p>

The above 2 are alternatives for text and images. NOTE: In the above I have added an extra space folowing the < to get Markdown syntax to render in the final rendering.

This is the basic syntax for an image, it will place the image on the left margin. But can also be used in-line style, allowing text to be inserted on either side.


Tips for working with Workarounds

1.Using "float" will place the image absolute and next to the line or paragraph of the text.

2.Using "text-align", whether div or span, will place image in separate line or paragraph.

3.Using a line break, < br> tag, forces a line break, whether for image or text.

4.Using < center>< /center> will place the image or text in the center of a line.

5.headers , any of the #, must be the start of their own line or paragraph.

_.

We have come to the conclusion of "Completing the inference of Markdown with "Workarounds"." And the conclusion of the training.

This is part 4 of a 4 part training.

In this fourth part, and clusion, we have seen how the "Workarounds" can be necessary when working with the syntax of Markdown.

In part 1 the question of "What is Markdown?" was answered and the benefits in using Markdown, namely, the editing and creating takes place during the process of writing.

In part 2 and 3, we learned the basic syntax of Markdown. In part 4, and the final part of the training, we learned some of the html workarounds to complete the process of writing Markdown for publishing to WordPress.

WordPress has its own set of plug-ins for Markdown. Many of which have their own set of parameters, and some are definitely of a "Flavor". Most use native Markdown and have different updates. While I was writing this training I tended to use PrettyPress, mainly because it uses a split screen.

Markdown is not for everyone. There are some people who are steadfast in working with Word Editors and "enjoy" (relative term) the process of struggl ##ng and juggling with the writing and editing. Often this painstaking editing is completed after the writing is complete. Markdown on the other hand, the editing and creating takes place during the process of writing.

One last note, using Maskdown to write may seem a bit daunting at first, but after spending some time to learn syntax and format, it will become second nature and your comfort level of writing.

If you liked this training, please don't forget to click on the "Like This" button.

Please leave a comment about the training, good or bad, whether you liked it or didn't like it. Tell me what you learned. Other people may read your comment and learn somehing as well.

Did you find anything that I missed in the Markdown syntax. Or anything that you feel should have been added? In your comment, let me know and I will include the additions in an update of the training.

Lastly, if you have questions about the training, be sure to ask{Right} hesitate or feel reluctant, because you feel your question as "too" stupid (its just different, and is still worthy of



Join the Discussion
Write something…
Recent messages
onmyownterms Premium
Thanks for sharing.
Reply
Top