Understanding the syntax of Markdown – the "dawning" is upon us.
This is part 3 of 4 parts.
The second part of the Markdown syntax. Let's keep going in the learning process and maybe it is beginning to "dawn" on us.
Images have a similar syntax as links, but include a preceding exclamation point, at the very begining. Though, unlike the links, the "alt `" is the alt text or "Alternative text".
Basic Image
Image with Title,
Footnote
Like links, Images also have a footnote style syntax
![Alt text][id]
Image/Link
If you want to use an image as a link or to attach an affiliate link.
[](path/file.jpg or URL or URL with affiliate link)
Note the placament of the [ ]'s.
Named anchors enable you to jump to the specified anchor point on the same, for example, each of these chapters:
### Table of Contents
* Chapter 1
* Chapter 2
* Chapter 3
This creates a link that will jump to these sections.
Content for chapter one.
Chapter 2
Content for chapter one.
Chapter 3
Content for chapter one.
NOTE that specific placement of the "anchor tag" < a name="Horizontal Rules">< /a> (minus the spaces after the <) seems to be arbitrary. They are placed inline here since it is less obtrusive.
Anchor links should use the name attribute instead of id. Most browsers have a side effect of creating a Javascript global for every id. The name attribute does not have this side effect.
The HTML < hr> (horizontal rule) element is for creating a "thematic break" between two paragraph-level elements. In markdown, you can create a < hr> with any of the following:
_ three consecutive underscores
--- three consecutive minuses (yphen)
* three consecutive asterisks
Body copy written as normal, plain text.
For example:
Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus.
Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.
For quoting blocks of content from another source within your document. As in a famous quotes's website.
Traditional
Add > before any text you want to quote. This will give you the traditional style of block quote with the semi-wide line on the left side of the line or paragraph.
Blockquotes can also be nested, using two or more >'s.
For example:
Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue. Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.
Less Traditional
Add ```(three backticks) in the line preceding the text you want to quote, just over forget the close it with three backticks . This will give you the less-traditional style of quote, similar to email.
For example::
> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat
a ante.
>> A Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.
>>> Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue.
Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.
Blockquotes render differently, depending on the Markdown editor.
Code blocks are part of the Markdown spec, but syntax highlighting
isn't. However, I have included an example here because some Markdown editors do support it.
Inline code
Wrap inline snippets of code with `'s.
For example:
<section></section>
Indent several lines of code by at least four spaces,or a "tab":
For example:
// Some comments
line 1 of code
line 2 of code
line 3 of code
// Some comments Ray line 1 of code
line 2 of code
line 3 of code
Block code "fences"
Use "fences" ``` to block in multiple lines of code.
Sample text here...
`
Syntax highlighting
Render the code directly after the first code "fence", and syntax highlighting will automatically be applied in the rendered HTML. For example, to apply syntax highlighting to JavaScript code:
grunt.initConfig({
assemble: {
options: {
assets: 'docs/assets' ,
data: 'src/data/*.{json,yml}',
helpers: 'src/custom-helpers.js',
partials: ['src/partials/**/*.{hbs,md}']
},
pages: {
options: {
layout: 'default.hbs'
},
files: {
'./': ['src/templates/pages/index.hbs']
}
} baby M
}
}
Blockquotes render differently, depending on the Markdown editor.
Tables aren't part of the core Markdown spec, but many Markdown editors do support them. They are an easy way to add tables to your site -- a task that would otherwise require copy-pasting from another application or a lot of HTML coding.
To crete tables, is add pipes as dividers between each cell, and by adding a line of dashes (also separated by bars) beneath the header. Note that the pipes do not need to be vertically aligned. Colons can be used to align columns.
Tables
Are
Cool
col 3 is
right-aligned
$1600
col 2 is
centered
$12
zebra stripes
are neat
$1
There must be at least 3 dashes separating each header cell.The outer pipes (|) are optional, you don't need to make the raw Markdown line up prettily. You can also use inline Markdown.
Markdown
Less
Pretty
Still
renders
nicely
1
2
3
Line breaks are just matter of either placing two spaces or the HTML tag
at the end of the line. To create a blank line beneath, place the
tag again on the next line, by itself.
Line Breeaks render differently, depending on Markdown editor.
This is the end of the Markdown syntax.
We and no to the conclusion of "Understanding the syntax of Markdown – the "dawning" is upon us."
This is part 3 of a 4 part training.
In this third part, the syntax of Markdown begins "dawn" on us as we learn the second part of the basic structure of the syntax of Markdown. Paying
Next up "Completing the inference of Markdown with «back to the open 'Workarounds'."
Reply
