Vine Type Content Management with Standards in Mind

24 May 2006

How To Style Text

You've created a password, and entered the administrative portion of your new website. You're ready to publish away, but all you see is a big blank box staring at you.

Where's the WYSIWYG editor? you ask.

As you can see, you don't need a what-you-see-is-what-you-get editor to create text effects. Vine Type uses a technology called Markdown that uses simple character markers to indicate italic or bold, quote or code.

Italics and Bold

To create italic text, surround the characters with a single asterisk or underscore like this...

It was a *lovely* evening.
I enjoyed it _very much_.

...to create this: It was a lovely evening. I enjoyed it very much.

To create bold text surround the text with double asterisks or double underscores...

It was a **lovely** evening.
I enjoyed it __very much__.

...to create this: It was a lovely evening. I enjoyed it very much.

To create bold and italic, you could use three underscores or three asterisks or mix and match but keep them nested correctly...

It was a ***lovely*** evening.
I enjoyed it __*very much*__.

...It was a lovely evening. I enjoyed it very much.

Note to designers:

While I am portraying this styling as "italic" and "bold" we as designers understand that the underlying XHTML markup is <em> and <strong> not the semantically-challenged <i> and <b>. You may adjust the look and feel of these elements to match they style of the website you designed.

Headings

When writing for the web, a good rule of thumb is to provide section headings. There are two ways to do this. Use octothorpes (didn't know the # key had a name other than 'pound' or 'hash' did you?) or underline the heading with dashes or equal signs.

#First Level Heading
Another First Level Heading
===========================
##Second Level Heading
Another Second Level Heading
----------------------------
###Third
####Fourth
#####Fifth
######Yes, Even Sixth Level Headings

I won't show these here, but will mention that the section headings on this page are second level headings and you can see they appear in a different color than the rest of the page.

Quotes

To indent for a quotation begin the line with a greater-than sign and a space. The remainder of the text will be placed into a <blockquote> tag which usually causes indentation...

> "I never met a man I didn't like."
> -- Will Rogers.

...displays like this:

"I never met a man I didn't like." -- Will Rogers.

Lines and Spaces

Lines and spaces mean something to Markdown. If you place a blank line between text, it means you want to start a new paragraph.

this
is
one paragraph

this is another

produces this:

this is one paragraph

this is another

If you want to force a break to a new line, place two spaces at the end of that line and Vine Type will put a break where you want it. You won't be able to see it in the example, but I'm putting two spaces after the word blue

roses are red
violets are blue
to force a new line add spaces two.

produces this:

roses are red violets are blue
to force a new line add spaces two.

There's More!

What I've shown you is probably all you'll need to style text on your Vine Type website. If you are interested in learning about even more options, the full syntax is available at the site that created Markdown, Daring Fireball

download

Visit the Download Area to test drive the standard in standards compliance.

upgrade

Add professional features to your Vine Type site by purchasing a Vine Type Pro license.

feedback

Discuss Vine Type or pose questions at the official Vine Type Forum hosted by ASP Advice.

about us

Learn more about this site and the features it is demonstrating.

© 2001-2014 vine branches — website powered by vine type