Markdown tutorial

rod barbee · 2012-09-25 01:25:28

For those of you who have the Pages engine, Matt has included many examples of use Markdown Syntax, especially on the Info page. But you you don't own Pages, then you don't have access to that.
The text below has been written in Markdown syntax. Copy and paste it into any Markdown enabled text block in any TTG CE, CE2, or CE3 engine. Markdown enabled textblocks are denoted with (md).

Once you've loaded this text, you can compare it to the results in the Lightroom preview area or online.

Also be sure to visit Mark Gruber's Markdown Syntax tutorial.

___________________

#Formatting text using Markdown
When Matt first included Markdown in the web engines, I was a little intimidated by it. It just seemed to be one more layer of complication. But nothing could be further from the truth. Markdown is easy to use and easy to learn. It's so much easier than using regular HTML. All it takes is to start using it. You'll soon see all its benefits.

On this page I'm going to attempt to include as many examples of Markdown formatting text as I can. It won't be every example, but hopefully it will be those that will be most often needed.

First of all, you'll find creating text for your web site a lot easier if you first write it in a text editor. Word processors can work too. I regularly write the text in Microsoft Word. I'll also us a text editor like Notepad++.

__Compare the text you see in the preview to the Markdown in the block and you'll quickly see how it all works.__

To create line breaks, use space, space, return. If you're writing in the text block of Lightroom, you'll need to use space, space, ctrl-return. If you just use return, you'll be tossed out of the text block.

Ok, let's get to some formatting. We'll start with headers.

#Here's an example of the H1 heading
##Here's an example of the H2 heading
###Here's an example of the H3 heading
####Here's an example of the H4 heading
#####Here's and example of the H5 heading
Follow your heading with space, space, return. The text formatting will go back to the default paragraph settings.
You can control the font size of the heading in the Typography section of the Site Info control pane.

##Adding emphasis
You can create __bold text__ or _italicized_ text by wrapping a word or words with the underscore: two underscores on each side for __bold__, and one on each side for _italics_.

##Hyperlinks
Insert hyperlinks in your text by wrapping the text you want displayed in brackets followed by the hyperlink in parentheses: \[text\]\(hyperlink\). Like so:
[The Turning Gate](http://theturninggate.net).

##Unordered lists
There are several symbols that will let you create lists. These are all referenced in Mark Gruber's [Markdown document]( http://daringfireball.net/projects/markdown/syntax/). I'm going to use the asterisk here. When creating a list, be sure to have at least two lines between the list and any preceding text. Add a space after the asterisk to create the list.

* item one
* item two
* another item
* you should have the idea by now

##Numbered lists
Pretty much the same as an unordered list. Just use numbers instead of the asterisk.

1. Use TTG Pages CE2 to create your site
2. Use one of the CE2 galleries to display your images
3. Use TTG Stage CE2 for videos, single item product page, generic page, and much more
4. Use TTG Autoindex CE2 to create nested gallery indexes
5. Use TTG Client Response Gallery CE2 to interact with your clients

##Quote blocks
Need to quote a client for a testimonial? Quote blocks work great for that:

>I just wanted to tell you how much fun we had at your recent event. We're looking forward to next time and we'll definitely be telling all our friends--Judy Customer

##Adding images to text
Place the following code within the text where you want the image to appear. You can use class="float-right" or "float-left" if you wish.

This will place an image in the middle of the page without any text wrapping:

This will float the image to the right:

(by the way, that was an example of using a code block. Place a tab before the text to make a code block)

__Note:__ This html for inserting an image assumes the picture you want to include is in the filmstrip. If it's not, you'll need to provide the path to the picture. (The image included here is part of the .lrwebengine package so it's showing up)

Set the image width as needed. Be sure it's not larger than what you've set in the Output Settings control pane.
This might take a little experimentation. _Usually_ the pictures go where you want them. But depending on other nearby text, and the image width you've specified, things _may not_ look as you intended.
<img alt="Sample image" src="photos/sample.jpg" style="width: 200px;" class="float-left" />Also, for some reason I can't figure out, the picture may or may not appear in the preview area. Instead you might see a placeholder with a question mark. The first thing to do is to make sure you've written the path and filename correctly. If everything is correct, Export the gallery, upload, and check the page online. It should look fine.
Want to see it at work? Modify the code included here with the filename from a picture in your filmstrip. Make sure you use the jpg file extension.

---
##Horizontal lines
Want to add a horizontal dividing line? There are several ways, check Mark Gruber's document for all of them. I'm going to use the hyphen. Place three or more on a line by themselves:

---

##Escapes
If you happen to use a Markdown formatting character, like an asterisk, within your text, there's a chance that things can go all screwy. Use a backslash prior to the character if you want to use the literal character. For instance, if wish to surround a word or group of words with asterisks do it like this: \*See all characters that need an escape\* in Mark's document.
See an example of this in the Hyperlink section above.

##Other
Sometimes things seem like they're not working. If that happens, try adding another line in front of the problem area. For instance, in the horizontal line example above, there are two returns after the text about making lines. If there was only one return, you'd see a problem. Go ahead and try it. Delete one of the returns and see what happens. I dare you.

Community @ The Turning Gate

#1 2012-09-25 01:25:28

Markdown tutorial

Board footer