Translated from 日本語 • View original DEVLAB has been renovated and made into an official blog in earnest as IsaB, and the number of people who write articles should increase in the future, so for this blog to check the template of Markdown notation and display style. I transcribed this post as a welcome document, but it is also a TIPS that is not particularly problematic for the public to be released, so I will publish it as an article.
What is markdown notation in the first place? ── There may be many people who say,
Markdown is one of the lightweight markup languages for writing documents. It was originally developed to generate HTML from easily written documents in plain text format. Currently, software (converters) that convert files to PowerPoint and LATEX formats in addition to HTML are also being developed. Since various extensions are made by the developers of each converter, there are various dialects.
The above is a quote from Wikipedia.
Well, to put it simply, it is a **writing method that allows you to convert it into a richly styled HTML document by writing text in a format that follows the rules even if you don't know HTML.**That's what it says. If you memorize even the basic formats, you can convert them into various formats, making it an advantageous language skill that can be used in a variety of situations.
──So, I will introduce the basic format right away.
1. Heading Blocks
First, let's start with how to write the heading block. In principle, block elements require line breaks before and after.
# Heading H1
## Heading H2
### Heading H3
#### Heading H4
##### Heading H5
###### Heading H6
What this looks like is
Heading H1
Heading H2
Heading H3
Heading H4
Heading H5
Heading H6
↑ It will be like this.
Only H1 and H2 have different notations,
Heading H1
===============
Heading H2
---------------
↑ You can also use something like this. The number of = and - in the line immediately after the heading is OK if it is more than one. This makes it easier to read your sentences even when the text is not styled in markdown.
You can also use hashes in headings to achieve in-page links (this is an extension of Markdown Extra). Available on this site). In that case, add '{#hash}' after the heading.
### Hashed headings {#hash}
Hashed Headings
For in-page link notation to hashed headings, see the link section below.
2. Citation block
Since it is a block element, it needs to be newlineed.
> Contains the text of the quote.
Contains the text of the quote.
Nesting is also possible.
> Nesting citations
>
> - Content that is a child element
> - Content that is a child element
>
Nesting citations
- Content that is a child element
- Content that is a child element
3. Code Blocks
Since it is a block element, it needs to be newlineed.
\`\`\`
function is_assoc( &$data ) {
if (!is_array($data))
return false;
return !empty(array_diff( array_keys($data), range(0, count($data) - 1) ));
}
\`\`\`
↓ It will be displayed like this.
function is_assoc( &$data ) {
if (!is_array($data))
return false;
return !empty(array_diff( array_keys($data), range(0, count($data) - 1) ));
}
4. Inline Code
Since it is an inline element, there is no need for line breaks before and after.
The inline code looks like \'is_assoc()\'←.
The inline code is 'is_assoc()' ← look like this.
5. Random list
It is marked up in
- List 1
- List 2
- Nest List 1
- Nestlist 2
- List 3
List 1
List 2
Nest List 1
- Nestlist 2
List 3
6. Numbered Lists
It is marked up in
1. List 1
1. List 2
1. nest list 1
1. nest list 2
1. List 3
List 1
List 2
nest list 1
- nest list 2
List 3
7. Text emphasis
Since it is an inline element, there is no need for line breaks before and after.
If you want to emphasize it, **this will** make the text bold and emphasize.
If you want to emphasize it, this will make the letters bold and emphasize.
If you want to italicize alphanumeric characters, etc., if you use *Abc*, the letters will be displayed in italics, such as _123_.
If you want to italicize alphanumeric characters, etc., if you use Abc, the letters will be displayed in italics, such as 123.
8. link
Since it is an inline element, there is no need for line breaks before and after.
[Strings displayed](#hash "title属性値")
You can use [the link in](http://www.google.com/ "google TOP") the text like this.
You can use the link in the text like this.
The title attribute value is optional, so it is OK to simply use it as [a Yahoo! top](http://yahoo.co.jp).
The title attribute value is optional, so it is OK to simply use it as a Yahoo! top.
9. Pasting an image
You can also paste images.
{#id .class}
When the above format is converted to HTML,
<img src="画像ファイルのURL" alt="alt属性値" title="title属性値" id="id" class="class">
── is a mechanism that is converted. As an application, I will post an example of how to use the bootstrap class used on this site to place images such as left, center, and right.
{.pull-left}
You can wrap the text around to the right side.<div class="clearfix"></div>
{.center-block}
{.pull-right}
You can move the text around to the left.<div class="clearfix"></div>```
↓
 You can wrap the text around to the right side.
 You can move the text around to the left.
To unwrap the loop'<div class="clearfix"></div>The downside is that it will be necessary, but I think it is easy to use.
## Miscellaneous
Also, it is useful to know the characteristics of line breaks. Markdown properly breaks line breaks at the end of sentences, but even if you use a blank line in a row, only one blank line will be valid. In other words,
From here,
I want to break the line in three lines.
──, but in reality,
From here,
I want to break the line in three lines.
── and only one blank line can be entered. If you want to include more line breaks, do the following:
From here,
I want to break the line in three lines.
From here,
I want to break the line in three lines.
You can add as many line breaks as you want by changing the inline-style '3em' in the 'div' tag to the number of lines you want to break. Well, embedding tags directly is contrary to the semantics of 'markdown', but it is a necessary evil to write blog posts in an easy-to-read manner.
There are many other notation for character decoration, but basically just knowing the notation introduced here can write a much richer article. If you are interested in other notations, if you look up keywords such as 'markdown' on the Internet, you will get caught a lot, so please refer to that.
One thing to note in WordPress is that when writing an article using markdown notation, you need to set the editing mode of the post to "Text". Please note that if you forget this and write in visual mode, the markdown conversion will not be applied.