How To Expose and Neutralize HTML and MDL in Your Steemit Posts

reveurgam (60)in #editing • 6 years ago (edited)

In this, the second to last of my series on editing in Steemit, I'll reveal how to show the HTML & MDL you use so you can help others as I've helped you - hopefully even better!

If I find other HTML and MDL that works on Steemit, I'll add more, but it's not a priority for me.

If you're trying to add some "style" to your articles on Steemit, there are some choices from hypertext markup language (HTML) and markdown language (MDL) that you can use. Each of these items is called a "tag"; the one before the text is an opening tag, and the one after the text you're styling is a closing tag. Certain tags do not need both as they are self-closing. Tags within <> are from HTML. Unfortunately, those of you who have studied HTML and MDL may be frustrated because only certain tags from each work. Here are a few that I figured out for you, although I STILL don't know how to underline. In each article, I'll share some tips for you!

For those of you familiar with the programming features of browsers, you know about the "inspect" feature available from the menu, which can aid you in viewing (some of) the source code of a web page or message. "Inspect" allows you to see HTML and CSS, and tons of other stuff, which can be a useful tool. It even allows you to temporarily tweak the exposed coding to see how things changed - a great tool for tinker programmers. It's like tearing down an engine to learn about all the parts and how the work on each other!

Such a tutorial is way beyond the scope of what I intend. Besides, there are numerous online tutorials that already exist, and many of them are completely free. Each company that makes a browser generally has documentation prepared about this feature. I can guarantee you that it'll take a while to fully understand it and be able to take advantage of everything it has to offer.

Instead, I want you to know two simple techniques you can use in the Steemit editor: neutralizing tags and exposing what you've hidden. Technically, the former can be used for the latter purpose. I haven't yet discovered a way to do any of this with HTML. Perhaps it's because HTML has such a strong effect on MDL contained within its tags - often disabling it. Personally, I think this is a flaw in the design of how the Steemit editor interprets your code into HTML - since your HTML and MDL get turned into HTML, AFAIK, there's no real reason, is there? I take advantage of certain MDL tags for both "inline" and "block" display of things you can't otherwise see.

Exposing Tags

Inline Code Exposure with Backticks

If you've been reading this series, you'll often have noticed that the coding I show you is in a color-inversed "box".

Most often, I use single ` and triple backticks ``` (also known as grave accents in languages that use accent marks over letters) if I need to expose an HTML- or MDL-tag-containing piece of info. The use of backticks simultaneously neutralizes whatever is between them and displays the contents. If you've read my previous article, however, about Tags and Spacing, then you know that single backticks do not stop Steemit from removing extra spaces. The same is true of triple backticks.

Single backticks are to show something (primarily that which contains coding, but you can also use it to offset quotations, too) within the same line as other text, hence the term "inline". Triple backticks ``` will behave the same way if used inline.
The <hr> tag here is placed between single backticks `.
The <hr> tag here is placed between triple backticks ```.

The `<hr>` tag here is placed between single backticks \`.  
The ```<hr>``` tag here is placed between triple backticks \```.

Exposing a Block of Lines with Enters

Triple backticks ``` or 4 spaces behave similarly to single backticks but they affect whatever block of content you wish to affect (with one key difference), and they neutralize and completely display the content, including spaces that are otherwise omitted.

Spaces

I don't really use this because it's more limited in function and doesn't always work, but you may find it of value. It is less useful than the triple backtick ```.

Quadruple spaces placed at the start of a paragraph neutralize HTML and MDL tags, and place everything in a box, but only to the point where you pressed enter.

+ Example Quadruple spaces neutralize HTML and MDL code and place everything in a box, but only to the point where you pressed enter.

Note: The four spaces don't always work right. I tried to place the example in the reverse order you see. Without a blank line, the 4 had no effect other than to disable the MDL + tag. When I placed it as you see above, I had to put two blank lines between them to make it work. Steemit is full of such anomalies, sadly.

Triple Backticks

Triple backticks ``` are placed on empty lines above and below the content you want to neutralize and display inside an inversed box. In theory, you can encompass as much content as you want within the triple backticks, but the reality is that it is limited to how much data is allowed in the editor. As far as I know, there's no way to demonstrate this with coding, so I'll show you with an image.
image demonstrating the use of triple backticks

Li Europan lingues
Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu commun paroles.

Li Europan lingues
Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.



C/O https://placeholder.com/text/li-europan-lingues/

Neutralizing Tags

If you want to show tags without having them in that box, this is your solution. The backslash "\" will disable one HTML or MDL tag, which is great if you're trying to teach how to use tags. Even tags that Steemit doesn't allow have to be preceded by a backslash because Steemit's previewer still interprets them before you post. You'll need this to use any characters that are also used in MDL, such as the asterisk and underscore, too.

Disabling MDL:

The backslash "\\" itself has to be backslashed to show it.

The backslash "\" itself has to be backslashed to show it.

Disabling HTML:

\<hr/>

<hr/>

I have had several occasions during the writing of this series where the backslash did not work, but this was always because of HTML above or around it. If the backslash isn't working for you - and it neutralizes both HTML and MDL, check to see if there isn't some HTML nearby (such as a tag on the line above the paragraph you're writing). Here's an example.

<hr>
\<center>This shouldn't center, but the backslash is neutralized by the hr tag above.</center>

\This shouldn't center, but the backslash is neutralized by the hr tag above.

This series on the use of HTML and MDL on Steemit has taken me many days of effort to produce.

Credits:

If you're looking for an all-in-one guide, you might find The Ultimate Guide To Formatting On Steemit (Markup and Markdown) by @sisygoboom useful. It contains a lot of info, briefly presented, and I even found a couple of new things!

A great deal of this involved experimenting, both with what I know about HTML and markdown, and because not everything in the articles I read worked.
As I was working on this, I found this article How to insert 2 Columns and edit Text Style with equivalent HTML tags using Steemit's Raw Markdown Editor by @steemitguide. It's not as comprehensive as I needed, but it did remind me about divs and how to make columns, and the first 2 links to other articles (at the bottom of it) may help you. The third I found to be useless, except I got the "center" tag from it. Some of the info in the 2 other articles works, some doesn't, including the stuff about the Raw HTML editor.

I found this article to be difficult to use, and not everything works, but I gleaned some of the above content from it: Steemit Beginner Tips : Basic Guide on how to Adjust and Edit Fonts in Post. If you don't see something from here in my article, that's because it didn't work or I couldn't figure it out.

The article Steemitguide: Tutorial on How-To use Unicode Characters on Steemit Raw HTML Editor ! Includes Cheatsheet on Smileys, Icons and Symbols, by @steemitguide, has some outdated info, but it was where I got the emoticon codes from and, by looking at the source code, I was reminded about using tables.

If you appreciate this article, please upvote/like, resteem/share and share it to Facebook, Twitter, Reddit, LinkedIn and wherever else you can!