Merge pull request #234 from SirWumpus/markdown_O1
Refactor markdown guidelines to improve space and presentation.
This commit is contained in:
1 file changed
+258
-600
+258
-600
@@ -1,717 +1,375 @@
|
||||
<div id="markdown_guidelines">
|
||||
# IOCCC 28th Markdown Guidelines
|
||||
</div>
|
||||
|
||||
<div id="markdown_version">
|
||||
## IOCCC Markdown guidelines version
|
||||
</div>
|
||||
# IOCCC 29th Markdown Guidelines
|
||||
|
||||
<p class="leftbar">
|
||||
These [IOCCC markdown guidelines](markdown.html) are version **28.4 2025-04-28**.
|
||||
</p>
|
||||
## Markdown Guidelines Version
|
||||
|
||||
**IMPORTANT**: Be sure to read the [IOCCC rules](next/rules.html) and [IOCCC
|
||||
guidelines](next/guidelines.html).
|
||||
These [Markdown Guidelines](markdown.html) are version **28.4 2025-04-28**.
|
||||
|
||||
<div id="introduction"></div>
|
||||
|
||||
Jump to: [top](#)
|
||||
## Introduction
|
||||
|
||||
<div id="introduction">
|
||||
## IOCCC Markdown Guidelines Introduction
|
||||
</div>
|
||||
The IOCCC makes extensive use of [markdown](https://daringfireball.net/projects/markdown/). For example, when
|
||||
submitting to the IOCCC we have people submit remarks about their
|
||||
entry in markdown format. Every [winning entry](years.html) uses a `README.md`
|
||||
markdown file as the basis for forming the `index.html` web page for
|
||||
that entry. All HTML 5 generated pages on the [Official IOCCC website](https://www.ioccc.org/index.html)
|
||||
start with some markdown content. We no longer support older HTML
|
||||
standards and some of our guidelines help integrate winning entries into
|
||||
the website more easily.
|
||||
|
||||
The IOCCC makes extensive use of [markdown](https://daringfireball.net/projects/markdown/).
|
||||
For example, when submitting to the IOCCC
|
||||
we have people
|
||||
submit remarks about their entry in markdown format. Every
|
||||
[winning IOCCC entry](years.html) uses a `README.md` markdown file
|
||||
as the basis for forming the `index.html` web page for that entry.
|
||||
All generated HTML pages on the [Official IOCCC website](https://www.ioccc.org/index.html)
|
||||
start with some markdown content.
|
||||
See the [markdown syntax](https://www.markdownguide.org/basic-syntax) guide. See also the [CommonMark Spec](https://spec.commonmark.org/current/).
|
||||
See the FAQ on "[remarks.md submission file](faq.html#remarks_md)".
|
||||
|
||||
See the [markdown syntax](https://www.markdownguide.org/basic-syntax) guide.
|
||||
See also the [CommonMark Spec](https://spec.commonmark.org/current/).
|
||||
See the
|
||||
FAQ on "[remarks.md submission file](faq.html#remarks_md)".
|
||||
Nevertheless, the IOCCC does have certain practices that we ask authors to
|
||||
follow. Some of these relate to use of markdown directly and others relate
|
||||
to injecting HTML into the markdown file.
|
||||
|
||||
Nevertheless, the IOCCC does have certain practices that we ask authors to follow.
|
||||
Some of these relate to use of markdown directly and others relate to injecting HTML
|
||||
into the markdown file.
|
||||
In the sections below, examples will mark by ❌ for the incorrect method
|
||||
and ✔️ for preferred correct one.
|
||||
|
||||
Jump to: [top](#)
|
||||
<div id="sections"></div>
|
||||
|
||||
<div id="sections">
|
||||
## Please DO start `remarks.md` sections at level 3 (`###`), increasing for subsections up to 6 (`######`)
|
||||
</div>
|
||||
## Start `remarks.md` sections at level 3
|
||||
|
||||
IF (it is not required) you do use sections in your `remarks.md` file (this does
|
||||
not apply to other markdown files), **PLEASE** start at level three:
|
||||
If (it is not required) you do use sections in your `remarks.md` file (this does
|
||||
not apply to other markdown files), **PLEASE** start at level three up to level six:
|
||||
|
||||
``` <!---markdown-->
|
||||
# Foo <=== no thank you
|
||||
## Foo <=== no thank you
|
||||
```<!---markdown-->
|
||||
❌ # Section Reserved
|
||||
❌ ## Section Reserved
|
||||
✔️ ### Section Level 3
|
||||
✔️ #### Section Level 4
|
||||
✔️ ##### Section Level 5
|
||||
✔️ ###### Section Level 6
|
||||
```
|
||||
|
||||
Instead, start sections with 3 `#`s:
|
||||
<div id="anchor-name"></div>
|
||||
|
||||
## Replace `<a name="anchor_name"></a>` construct.
|
||||
|
||||
``` <!---markdown-->
|
||||
### Section 0
|
||||
```<!---html-->
|
||||
❌ <a name="old_way">...</a>
|
||||
✔️ <span id="new_way">...</span>
|
||||
```
|
||||
|
||||
For each subsection of the current section, add another `#`, up to 6, going back
|
||||
to 3 for new sections. For instance:
|
||||
<div id="links"></div>
|
||||
|
||||
## Markdown links instead of `<a>...</a>`
|
||||
|
||||
``` <!---markdown-->
|
||||
### Section 0
|
||||
...
|
||||
#### 1st subsection of section 0
|
||||
...
|
||||
##### 1st sub-subsection of the 1st subsection of section 0
|
||||
...
|
||||
#### 2nd subsection of section 0
|
||||
...
|
||||
##### 1st sub-subsection of the 2nd subsection of section 0
|
||||
...
|
||||
##### 2nd sub-subsection of the 2nd subsection of section 0
|
||||
...
|
||||
###### 1st sub-sub-subsection of the 2nd sub-subsection of the 2nd subsection of section 0
|
||||
...
|
||||
### Section 1
|
||||
...
|
||||
### Section 2
|
||||
...
|
||||
Etc.
|
||||
```<!---html-->
|
||||
❌ This <a href="#link_target>HTML link text</a> works, but we prefer
|
||||
✔️ [markdown link text](#link_target)
|
||||
```
|
||||
|
||||
<div id="del"></div><div id="strike"></div>
|
||||
|
||||
<div id="name">
|
||||
<div id="anchor-name">
|
||||
## Please do NOT use the `name` attributes in HTML `<a>...</a>` hyperlink elements
|
||||
</div>
|
||||
</div>
|
||||
## Replace `<strike>` or `<s>`
|
||||
|
||||
Please do **NOT** use the HTML construct:
|
||||
```<!---html-->
|
||||
❌ <strike>striked through text</strike>
|
||||
❌ <s>HTML 5 striked through text</s>
|
||||
|
||||
``` <!---html-->
|
||||
<a name="string">...</a> <=== no thank you
|
||||
✔️ <del>HTML 5 striked through text</del>
|
||||
✔️ ~~markdown striked through text~~
|
||||
```
|
||||
|
||||
as those are **NOT** part of the HTML 5 standard.
|
||||
<div id="ins"></div><div id="underline"></div>
|
||||
|
||||
Instead use:
|
||||
## Replace `<u>`
|
||||
|
||||
``` <!---html-->
|
||||
<div id="string">...</div>
|
||||
```<!---html-->
|
||||
❌ <u>old tags</u>
|
||||
✔️ <ins>HTML 5 tags</ins>
|
||||
```
|
||||
|
||||
where the `...` is the HTML you want to "name". The `<div>`
|
||||
encapsulates the HTML you want to name: i.e., the target of some
|
||||
`<a href="#string">` or some other `<a href="URL#string">`
|
||||
for the given page URL.
|
||||
<div id="tt"></div>
|
||||
|
||||
### IMPORTANT POINT:
|
||||
## Replace `<tt>`
|
||||
|
||||
There are certain markdown constructs that **CANNOT** have an **internal** `<div
|
||||
id="string">...</div>` element.
|
||||
|
||||
An example is headings (lines that start with a `#`). For example:
|
||||
|
||||
|
||||
``` <!---markdown-->
|
||||
# <div id="string">THIS WILL NOT WORK!</div> <=== this will not work
|
||||
```<!---html-->
|
||||
❌ <tt>obsolete HTML</tt>
|
||||
✔️ <span style="font-family: monospace;">monospace font</span>
|
||||
✔️ `markdown style monospace`
|
||||
```
|
||||
|
||||
For things like headings, you have to surround them with the `<div
|
||||
id="string">...</div>` element, as in:
|
||||
<div id="indent"></div>
|
||||
|
||||
``` <!---markdown-->
|
||||
<div id="string">
|
||||
# This will work
|
||||
</div>
|
||||
## Indent code blocks by four spaces, not by TAB.
|
||||
|
||||
```<!---sh-->
|
||||
❌ echo "This code block is NOT indented"
|
||||
```
|
||||
|
||||
While some browsers will still recognize the HTML construct `<a
|
||||
name="string">...</a>`, it is possible **they MIGHT NOT** in the future.
|
||||
We request that you indent the code block by multiples of four (4)
|
||||
ASCII SPACES, never TAB (␉):
|
||||
|
||||
Jump to: [top](#)
|
||||
````<!---sh-->
|
||||
✔️ echo "This code block is indented by multiples of 4 spaces"
|
||||
|
||||
<div id="links">
|
||||
## If you can, it is PREFERABLE to use markdown links rather than `<a>...</a>`
|
||||
</div>
|
||||
|
||||
It is easier and preferred to use markdown links rather than HTML `<a>..</a>`
|
||||
anchors.
|
||||
|
||||
Instead of:
|
||||
|
||||
|
||||
``` <!---html-->
|
||||
Use of <a href="#links>HTML anchors</a>
|
||||
is one option, however ...
|
||||
```
|
||||
|
||||
|
||||
``` <!---markdown-->
|
||||
[markdown links](#links) are easier and preferred
|
||||
```
|
||||
|
||||
Jump to: [top](#)
|
||||
|
||||
<div id="strike">
|
||||
<div id="del">
|
||||
## Please do NOT use the `<strike>` or the `<s>` HTML element
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Please do **NOT** use the obsolete `<strike>` or the obsolete `<s>`
|
||||
(<del>**strikeout**</del>) HTML elements:
|
||||
|
||||
``` <!---html-->
|
||||
<strike>...</strike> <=== no thank you
|
||||
<s>...</s> <=== no thank you
|
||||
```
|
||||
|
||||
Use instead:
|
||||
|
||||
``` <!---html-->
|
||||
<del>...</del>
|
||||
```
|
||||
|
||||
Jump to: [top](#)
|
||||
|
||||
<div id="underline">
|
||||
<div id="ins">
|
||||
## Please do NOT use the `<u>` HTML element
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Please do **NOT** use the obsolete `<u>` (<ins>_underline_</ins>) HTML element:
|
||||
|
||||
``` <!---html-->
|
||||
<u>...</u> <=== no thank you
|
||||
```
|
||||
|
||||
Use instead:
|
||||
|
||||
``` <!---html-->
|
||||
<ins>...</ins>
|
||||
```
|
||||
|
||||
Jump to: [top](#)
|
||||
|
||||
<div id="tt">
|
||||
<div id="span">
|
||||
## Please do NOT use the `<tt>` HTML element
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Please do **NOT** use the obsolete `<tt>`
|
||||
(<span style="font-family: monospace;">**teletype**</span>) HTML element:
|
||||
|
||||
``` <!---html-->
|
||||
<tt>The tt element is obsolete</tt> <=== no thank you
|
||||
```
|
||||
|
||||
Instead use either a monospaced `<span>` or an inline markdown code block:
|
||||
|
||||
``` <!---html-->
|
||||
<span style="font-family: monospace;">Use of a monospaced font
|
||||
is one option,
|
||||
however ... </span>
|
||||
```
|
||||
|
||||
We recommend using the inline markdown code block method instead:
|
||||
|
||||
``` <!---markdown-->
|
||||
Using the `inline markdown code block` is easier and is **preferred**.
|
||||
```
|
||||
|
||||
Jump to: [top](#)
|
||||
|
||||
<div id="unindented">
|
||||
<div id="indented">
|
||||
## Please do NOT use unindented code blocks
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Please do **NOT** start code blocks at the first column.
|
||||
|
||||
For example:
|
||||
|
||||
```` <!---markdown-->
|
||||
``` <%%NO_COMMENT%%!---sh-->
|
||||
echo "This code block is NOT indented" <=== no thank you
|
||||
```
|
||||
✔️ # The top level starts with a 4 ASCII space indent.
|
||||
✔️ #
|
||||
✔️ # Only indent with multiples of 4 ASCII spaces.
|
||||
✔️ # 2nd level indent needs 8 ASCII spaces (no tabs).
|
||||
✔️ # 3rd level indent needs 12 ASCII spaces (no tabs).
|
||||
✔️ # etc.
|
||||
````
|
||||
|
||||
We request that you indent the code block by multiples of 4 ASCII **SPACES**:
|
||||
Alternatively its possible to use ` ``` ` marks, without the initial
|
||||
four (4) space indentation. This is usually the better method.
|
||||
|
||||
```` <!---markdown-->
|
||||
``` <%%NO_COMMENT%%!---sh-->
|
||||
echo "This code block is indented by mutiples of 4 spaces"
|
||||
|
||||
# The top level starts with a 4 ASCII space indent.
|
||||
#
|
||||
# Only indent with multiples of 4 ASCII spaces.
|
||||
# 2nd level indent needs 8 ASCII spaces (no tabs).
|
||||
# 3rd level indent needs 12 ASCII spaces (no tabs).
|
||||
# etc.
|
||||
```
|
||||
````<!---markdown-->
|
||||
✔️ ```
|
||||
✔️ The same thing applies to any markdown block bracketed by ``` lines.
|
||||
✔️ ```
|
||||
````
|
||||
|
||||
Moreover:
|
||||
<div id="tabs"></div><div id="spaces"></div>
|
||||
|
||||
```` <!---markdown-->
|
||||
```
|
||||
The same thing applies to any markdown block surrounded by ``` lines.
|
||||
```
|
||||
````
|
||||
## Do not use TAB in markdown files.
|
||||
|
||||
Please do **NOT** indent using ASCII tab characters in markdown files.
|
||||
Please do **NOT** indent with ASCII TABs (␉), **OR** use any ASCII TAB
|
||||
(␉) anywhere inside a markdown file.
|
||||
|
||||
Jump to: [top](#)
|
||||
|
||||
<div id="tabs">
|
||||
<div id="spaces">
|
||||
## Please do NOT use ASCII tabs in markdown files
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Please do **NOT** indent with ASCII tabs, **OR** use any
|
||||
ASCII tab characters anywhere inside a markdown file.
|
||||
|
||||
While we have nothing against the ASCII tab character in general,
|
||||
we have discovered that ASCII tab characters create problems when
|
||||
While we have nothing against the ASCII TAB (␉) character in general,
|
||||
we have discovered that ASCII TAB (␉) characters create problems when
|
||||
used as part of the leading whitespace within a markdown file.
|
||||
|
||||
If you need to indent 2 or more levels, use multiples of 4 ASCII
|
||||
**SPACES**.
|
||||
If you need to indent two (2) or more levels, use multiples of four (4)
|
||||
ASCII SPACES.
|
||||
|
||||
For example:
|
||||
|
||||
```` <!---markdown-->
|
||||
````<!---markdown-->
|
||||
```
|
||||
Please do **NOT** use ASCII tabs in markdown files. <=== no thank you
|
||||
Please do **NOT** indent markdown with ASCII tabs. <=== no thank you
|
||||
❌ ␉Please do **NOT**␉use ASCII tabs␉in markdown files.
|
||||
❌ ␉␉Please do **NOT** indent markdown with ASCII tabs.
|
||||
|
||||
We don't mind tabs in general, <=== no thank you
|
||||
We just ask that you NOT use them in markdown files.
|
||||
❌ ␉We don't␉mind␉tabs␉in␉general,
|
||||
❌ ␉We just ask that you NOT use them in markdown files.
|
||||
```
|
||||
````
|
||||
|
||||
And to clarify, we are only talking about markdown files,
|
||||
not C code or any other non-markdown content:
|
||||
And to clarify, we are only talking about markdown files, not C code or
|
||||
any other non-markdown content:
|
||||
|
||||
```` <!---c-->
|
||||
printf("It is fine to use tabs in Obfuscated C code.\n");
|
||||
/* if you wish */
|
||||
````<!---c-->
|
||||
✔️ printf("It is fine␉to␉use tabs in Obfuscated C code.\n");
|
||||
✔️ /*␉if␉you␉wish */
|
||||
|
||||
// We ask that you to NOT use ASCII tab characters in your remarks.md writeup,
|
||||
// or in any other markdown files within your entry, please.
|
||||
✔️ // We ask that you to NOT use ASCII tab characters in your remarks.md writeup,
|
||||
✔️ // or in any other markdown files within your entry, please.
|
||||
````
|
||||
|
||||
**NOTE**: Again, you are **perfectly welcome** to use ASCII tab characters in
|
||||
your C code and other non-markdown files. We simply ask that you do **NOT** use any
|
||||
ASCII tab characters in markdown files.
|
||||
**NOTE**: Again, you are **perfectly welcome** to use ASCII tab characters
|
||||
in your C code and other non-markdown files. We simply ask that
|
||||
you do **NOT** use any ASCII TAB (␉) characters in markdown files.
|
||||
|
||||
Jump to: [top](#)
|
||||
<div id="code"></div><div id="languages"></div>
|
||||
|
||||
<div id="vim-tabs">
|
||||
### Tip for `vim` users
|
||||
</div>
|
||||
## Use HTML comments for code block language syntax.
|
||||
|
||||
If you use `vim` you can put in your `.vimrc` file (usually `~/.vimrc`) the
|
||||
following settings to make sure the tabs are not put in without you noticing:
|
||||
|
||||
``` <!---vim-->
|
||||
set tabstop=8 " a tab is 8 spaces (or whatever you wish it to be set to)
|
||||
set softtabstop=4 " ...but when inserting/backspacing use 4 spaces
|
||||
set shiftwidth=4 " ...and auto-indent 4 spaces (when autoindent is set)
|
||||
set expandtab " ...expand tab into spaces
|
||||
```
|
||||
|
||||
If you have file type detection enabled you can, if you prefer, have these
|
||||
settings set just for markdown files:
|
||||
|
||||
``` <!---vim-->
|
||||
autocmd! Filetype markdown setlocal set tabstop=8 softtabstop=4 shiftwidth=4 expandtab
|
||||
```
|
||||
|
||||
or so.
|
||||
|
||||
This will prevent the tab key from inserting tabs; rather it will insert 4
|
||||
spaces.
|
||||
|
||||
To **VERIFY** that there are no tabs in a file you may do, in command mode:
|
||||
|
||||
```
|
||||
/\t
|
||||
```
|
||||
|
||||
If you're in insert mode hit `ESC` first.
|
||||
|
||||
Jump to: [top](#)
|
||||
|
||||
<div id="languages">
|
||||
<div id="code">
|
||||
## Please use HTML comments to specify a language for a code block
|
||||
</div>
|
||||
</div>
|
||||
|
||||
We request that [fenced markdown code
|
||||
blocks](https://www.markdownguide.org/extended-syntax/#fenced-code-blocks)
|
||||
We request that [fenced markdown code blocks](https://www.markdownguide.org/extended-syntax/#fenced-code-blocks)
|
||||
**NOT** specify a language directly.
|
||||
|
||||
For example:
|
||||
|
||||
```` <!---markdown-->
|
||||
```c <=== no thank you
|
||||
int main(void) {return 0;}
|
||||
```
|
||||
````<!---markdown-->
|
||||
❌ ```c
|
||||
❌ int main(void) {return 0;}
|
||||
❌ ```
|
||||
````
|
||||
|
||||
Instead, put the language inside an HTML comment, separated from the
|
||||
markdown code block starting fence by a space:
|
||||
|
||||
```` <!---markdown-->
|
||||
``` <%%NO_COMMENT%%!---c-->
|
||||
int main(void) {return 0;}
|
||||
```
|
||||
````<!---markdown-->
|
||||
✔️ ```<!---c-->
|
||||
✔️ int main(void) {return 0;}
|
||||
✔️ ```
|
||||
````
|
||||
|
||||
**IMPORTANT**: The **initial** **\` \` \`** must be followed by an **ASCII SPACE**,
|
||||
and **THEN** an **opening** **`<!---`** (a "`<`", a "`!`" and then three "`-`"s), and
|
||||
**THEN** the **language** and **FINALLY** a **closing** "`-->`" (two "`-`"s
|
||||
**IMPORTANT**: The **initial** **\` \` \`** must be
|
||||
followed by an **ASCII SPACE**, and **THEN** an **opening** **
|
||||
`<!---`** (a "`<`", a "`!`" and then three "`-`"s), and **THEN**
|
||||
the **language** and **FINALLY** a **closing** "`-->`" (two "`-`"s
|
||||
followed by a "`>`").
|
||||
|
||||
<div id="code-and-text"></div>
|
||||
|
||||
Jump to: [top](#)
|
||||
## Ensure blank line between code block and text.
|
||||
|
||||
<div id="slash">
|
||||
<div id="void">
|
||||
## Please do NOT add trailing slash to void HTML elements
|
||||
</div>
|
||||
</div>
|
||||
Please do **NOT** place text on the next line after a markdown code
|
||||
block. Instead, place a blank line after the end of a markdown code
|
||||
block as this makes it easier to detect when markdown code blocks are
|
||||
**NOT** properly indented.
|
||||
|
||||
Please do **NOT** use a trailing slash on [void HTML
|
||||
elements](https://github.com/validator/validator/wiki/Markup-»-Void-elements).
|
||||
````<!---markdown-->
|
||||
```
|
||||
int
|
||||
main(int foo)
|
||||
{
|
||||
return foo;
|
||||
}
|
||||
❌ ```
|
||||
❌ C compilers cannot be given a -Wno-main-arg-errors flag.
|
||||
|
||||
See also this note on [trailing slashes in void-element start
|
||||
tags](https://github.com/validator/validator/wiki/Markup-»-Void-elements#trailing-slashes-in-void-element-start-tags-do-NOT-mark-the-start-tags-as-self-closing).
|
||||
|
||||
The trailing slash on void HTML elements has no effect and interacts badly with
|
||||
unquoted attribute values.
|
||||
|
||||
For example, please do **NOT** use markdown like these:
|
||||
|
||||
``` <!---html-->
|
||||
<br/> <=== no thank you
|
||||
|
||||
<hr/> <=== no thank you
|
||||
|
||||
<img src="1984-anonymous-tattoo.jpg"
|
||||
alt="image of a tattoo of the 1984 anonymous C code"
|
||||
width=600 height=401 /> <=== no thank you
|
||||
```
|
||||
|
||||
Instead use, respectively:
|
||||
|
||||
``` <!---html-->
|
||||
<br>
|
||||
|
||||
<hr>
|
||||
|
||||
<img src="1984-anonymous-tattoo.jpg"
|
||||
alt="image of a tattoo of the 1984 anonymous C code"
|
||||
width=600 height=401>
|
||||
```
|
||||
|
||||
Jump to: [top](#)
|
||||
|
||||
<div id="backslash">
|
||||
<div id="br">
|
||||
## Please do NOT use a TRAILING backslash (`\`) outside of a code block
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Unless the line is inside a markdown code block, please do **NOT**
|
||||
end a markdown line with a trailing backslash (`\`). Instead use
|
||||
a trailing `<br>`.
|
||||
|
||||
Instead of:
|
||||
|
||||
``` <!---markdown-->
|
||||
In markdown,\ <=== no thank you
|
||||
do NOT use trailing\
|
||||
backslashes outside of\
|
||||
a code block
|
||||
```
|
||||
|
||||
use:
|
||||
|
||||
``` <!---markdown-->
|
||||
In markdown,<br>
|
||||
use trailing<br>
|
||||
br's outside of<br>
|
||||
a code block
|
||||
```
|
||||
|
||||
Again, use of a trailing backslash (`\`) inside a markdown code block is fine:
|
||||
|
||||
```` <!---markdown-->
|
||||
```
|
||||
This is OK\
|
||||
inside a\
|
||||
markdown code\
|
||||
block
|
||||
```
|
||||
```
|
||||
int
|
||||
main(int foo)
|
||||
{
|
||||
return foo;
|
||||
}
|
||||
✔️ ```
|
||||
✔️
|
||||
✔️ C compilers cannot be given a -Wno-main-arg-errors flag.
|
||||
````
|
||||
|
||||
as is:
|
||||
<div id="tag-slash"></div>
|
||||
|
||||
``` <!---markdown-->
|
||||
`This is OK\`
|
||||
## Do not add trailing slash to void HTML tags.
|
||||
|
||||
Please do **NOT** use a trailing slash on
|
||||
[void HTML elements](https://github.com/validator/validator/wiki/Markup-»-Void-elements).
|
||||
|
||||
See also this note on [trailing slashes in void-element start tags](https://github.com/validator/validator/wiki/Markup-»-Void-elements#trailing-slashes-in-void-element-start-tags-do-NOT-mark-the-start-tags-as-self-closing).
|
||||
|
||||
The trailing slash on void HTML elements has no effect and interacts
|
||||
badly with unquoted attribute values.
|
||||
|
||||
```<!---html-->
|
||||
❌ <br/>
|
||||
❌ <hr/>
|
||||
❌ <img src="1984-anonymous-tattoo.jpg" alt="image of a tattoo of
|
||||
the 1984 anonymous C code" width=600 height=401 />
|
||||
|
||||
✔️ <br>
|
||||
✔️ <hr>
|
||||
✔️ <img src="1984-anonymous-tattoo.jpg" alt="image of a tattoo of
|
||||
the 1984 anonymous C code" width=600 height=401>
|
||||
```
|
||||
|
||||
Doing it this way will prevent `pandoc(1)` from generating deprecated HTML
|
||||
elements such as `<br />`.
|
||||
<div id="br"></div><div id="backslash"></div>
|
||||
|
||||
Jump to: [top](#)
|
||||
## Do not use a trailing backslash outside of a code block
|
||||
|
||||
<div id="images">
|
||||
<div id="img">
|
||||
## Please do NOT use markdown style images
|
||||
</div>
|
||||
</div>
|
||||
Unless the line is inside a markdown code block, please do **NOT** end
|
||||
a markdown line with a trailing backslash (`\`). Instead use a trailing
|
||||
`<br>`.
|
||||
|
||||
Please do **NOT** use the markdown embedded image element.
|
||||
```<!---markdown-->
|
||||
❌ In markdown,\
|
||||
❌ do NOT use trailing\
|
||||
❌ backslashes outside of\
|
||||
❌ a code block
|
||||
|
||||
✔️ In markdown,<br>
|
||||
✔️ use trailing<br>
|
||||
✔️ br's outside of<br>
|
||||
✔️ a code block
|
||||
|
||||
✔️ ```
|
||||
✔️ This is OK\
|
||||
✔️ inside a\
|
||||
✔️ markdown code\
|
||||
✔️ block
|
||||
✔️ ```
|
||||
|
||||
✔️ `This is OK\`
|
||||
````
|
||||
|
||||
Doing it this way will prevent `pandoc(1)` from generating deprecated
|
||||
HTML elements such as `<br />`.
|
||||
|
||||
<div id="img"></div>
|
||||
|
||||
## Do not use markdown style images
|
||||
|
||||
Instead of using this markdown element to embed an image:
|
||||
|
||||
``` <!---markdown-->
|
||||
 <=== no thank you
|
||||
```<!---markdown-->
|
||||
❌ 
|
||||
|
||||
✔️ <img src="filename.png"
|
||||
alt="describe the filename.png image for someone who cannot view it"
|
||||
width=PIXEL_WIDTH height=PIXEL_HEIGHT>
|
||||
|
||||
Which allows for HTML <img> attributes `alt=`, `width=` and `length=`.
|
||||
```
|
||||
|
||||
Use an `<img>` HTML element with `alt=`, `width=` and `length=`
|
||||
attributes:
|
||||
The problem is that `pandoc(1)` generates problematic HTML from the
|
||||
markdown image construct, the resulting HTML does **NOT** have `width`
|
||||
and `height` information so browsers have to slow down on rendering
|
||||
text around the image until it can internally determine the image size.
|
||||
|
||||
``` <!---html-->
|
||||
<img src="filename.png"
|
||||
alt="describe the filename.png image for someone who cannot view it"
|
||||
width=PIXEL_WIDTH height=PIXEL_HEIGHT>
|
||||
```
|
||||
<div id="hr"></div>
|
||||
|
||||
For example, instead of:
|
||||
|
||||
``` <!---markdown-->
|
||||
 <=== no thank you
|
||||
```
|
||||
|
||||
use this HTML:
|
||||
|
||||
``` <!---html-->
|
||||
<img src="1984-anonymous-tattoo.jpg"
|
||||
alt="image of a tattoo of the 1984 anonymous C code"
|
||||
width=600 height=401>
|
||||
```
|
||||
|
||||
The problem goes beyond the fact that `pandoc(1)` generates problematic
|
||||
HTML from the markdown image construct, the resulting HTML does **NOT**
|
||||
have `width` and `height` information so browsers have to slow down
|
||||
on rendering text around the image until it can internally determine
|
||||
the image size.
|
||||
|
||||
Jump to: [top](#)
|
||||
|
||||
<div id="hr">
|
||||
<div id="horizontal">
|
||||
<div id="lines">
|
||||
## Please do NOT use markdown style horizontal lines
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
## Replace markdown style horizontal lines.
|
||||
|
||||
Please do **NOT** use `---` style lines in markdown to create horizontal
|
||||
lines or to separate sections.
|
||||
|
||||
Unless something is inside a markdown **code block**, do **NOT** start a
|
||||
line with 3 or more dashes ("`-`"s).
|
||||
Unless something is inside a markdown **code block**, do **NOT** start
|
||||
a line with 3 or more dashes ("`-`"s).
|
||||
|
||||
Such markdown causes `pandoc(1)` to generate `<hr />`. The `<hr />` has no
|
||||
effect in standard HTML 5 and interacts badly with unquoted attribute values.
|
||||
Such markdown causes `pandoc(1)` to generate `<hr />`. The `<hr />` has
|
||||
no effect in standard HTML 5 and interacts badly with unquoted attribute
|
||||
values.
|
||||
|
||||
If a horizontal line is really needed, use:
|
||||
|
||||
``` <!---html-->
|
||||
<hr>
|
||||
```<!---html-->
|
||||
❌ * * *
|
||||
❌ - - -
|
||||
❌ ---
|
||||
|
||||
Regular divider...
|
||||
✔️ <hr>
|
||||
|
||||
A short divider...
|
||||
✔️ <hr style="width:10%;text-align:left;margin-left:0">
|
||||
```
|
||||
|
||||
If a short line is needed, use:
|
||||
<div id="parentheses"></div>
|
||||
|
||||
``` <!---html-->
|
||||
<hr style="width:10%;text-align:left;margin-left:0">
|
||||
## Do not put a literal "`(`" or "`)`" in markdown link titles
|
||||
|
||||
```<!---markdown-->
|
||||
❌ [some (text)](https://example.com/curds)
|
||||
✔️ [some (text)](https://example.com/curds)
|
||||
|
||||
❌ [ls(1)](https://example.com/ls-man-page.1)
|
||||
✔️ [ls(1)](https://example.com/ls-man-page.1)
|
||||
```
|
||||
|
||||
<div id="closing-parentheses"></div>
|
||||
|
||||
Jump to: [top](#)
|
||||
|
||||
<div id="parentheses">
|
||||
## Please do NOT put a LITERAL "`(`" or "`)`" in markdown link titles
|
||||
</div>
|
||||
|
||||
Please do **NOT** use literal parentheses inside markdown link titles.
|
||||
|
||||
Instead of:
|
||||
|
||||
``` <!---markdown-->
|
||||
[some (text)](https://example.com/curds) <=== no thank you
|
||||
```
|
||||
|
||||
use:
|
||||
|
||||
``` <!---markdown-->
|
||||
[some (text)](https://example.com/curds)
|
||||
```
|
||||
|
||||
Instead of:
|
||||
|
||||
``` <!---markdown-->
|
||||
[ls(1)](https://example.com/ls-man-page.1) <=== no thank you
|
||||
```
|
||||
|
||||
use:
|
||||
|
||||
``` <!---markdown-->
|
||||
[ls(1)](https://example.com/ls-man-page.1)
|
||||
```
|
||||
|
||||
Jump to: [top](#)
|
||||
|
||||
<div id="closing-parentheses">
|
||||
## Please do NOT end markdown links with "`))`"
|
||||
</div>
|
||||
|
||||
Please do **NOT** end a markdown link with a double closed parenthesis "`))`".
|
||||
## Do not end markdown links with "`))`"
|
||||
|
||||
Markdown links that end in "`))`" complicate parsing and sometimes lead
|
||||
to incorrect URLs or file paths.
|
||||
|
||||
Instead of:
|
||||
```<!---markdown-->
|
||||
❌ [some text](https://example.com/foo_(bar))
|
||||
✔️ [some text](https://example.com/foo_(bar))
|
||||
|
||||
``` <!---markdown-->
|
||||
[some text](https://example.com/foo_(bar)) <=== no thank you
|
||||
❌ This thing, ([some text](some/path)), is NOT ideal.
|
||||
✔️ This thing, [some text](some/path), is better.
|
||||
```
|
||||
|
||||
use:
|
||||
<div id="italics"></div>
|
||||
|
||||
``` <!---markdown-->
|
||||
[some text](https://example.com/foo_(bar))
|
||||
## Use `_` for italics in markdown
|
||||
|
||||
Please do **NOT** use `*` (single asterisk) for italics in markdown.
|
||||
Instead use an underscore (`_`). Using an asterisk can complicate
|
||||
parsing and sometimes lead to incorrect results. This can especially
|
||||
go for when it is **_bold and italic_**.
|
||||
|
||||
```<!---markdown-->
|
||||
❌ *this text is italic*
|
||||
✔️ _this text is italic_
|
||||
|
||||
❌ ***this text is bold italic***
|
||||
✔️ **_this text is bold italic_**
|
||||
✔️ _**this text is bold italic**_
|
||||
```
|
||||
|
||||
|
||||
|
||||
As another example, instead of:
|
||||
|
||||
``` <!---markdown-->
|
||||
This thing, ([some text](some/path)), is NOT ideal. <=== no thank you
|
||||
```
|
||||
|
||||
use:
|
||||
|
||||
``` <!---markdown-->
|
||||
This thing, [some text](some/path), is better.
|
||||
```
|
||||
|
||||
Jump to: [top](#)
|
||||
|
||||
<div id="code-text">
|
||||
<div id="code-and-text">
|
||||
<div id="text">
|
||||
## Please do NOT place text on the IMMEDIATE (very next) line after a markdown code block
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Please do **NOT** place text on the next line after a markdown code block.
|
||||
Instead, place a blank line after the end of a markdown code block
|
||||
as this makes it easier to detect when markdown code blocks are
|
||||
**NOT** properly indented.
|
||||
|
||||
Instead of:
|
||||
|
||||
```` <!---markdown-->
|
||||
```
|
||||
int
|
||||
main(int foo)
|
||||
{
|
||||
return foo;
|
||||
}
|
||||
```
|
||||
C compilers cannot be given a -Wno-main-arg-errors flag. <=== no thank you
|
||||
````
|
||||
|
||||
use:
|
||||
|
||||
```` <!---markdown-->
|
||||
```
|
||||
int
|
||||
main(int foo)
|
||||
{
|
||||
return foo;
|
||||
}
|
||||
```
|
||||
|
||||
C compilers cannot be given a -Wno-main-arg-errors flag.
|
||||
````
|
||||
|
||||
**BTW**: Please note the blank line after the code block.
|
||||
|
||||
Jump to: [top](#)
|
||||
|
||||
<div id="italics">
|
||||
## Please use `_` for italics in markdown
|
||||
</div>
|
||||
|
||||
Please do **NOT** use `*` (single asterisk) for italics in markdown. Instead use
|
||||
an underscore (`_`). Using an asterisk can complicate parsing and sometimes lead
|
||||
to incorrect results. This can especially go for when it is **_bold and
|
||||
italic_**.
|
||||
|
||||
For example, instead of:
|
||||
|
||||
``` <!---markdown-->
|
||||
*this text is italic* <=== no thank you
|
||||
```
|
||||
|
||||
use:
|
||||
|
||||
``` <!---markdown-->
|
||||
_this text is italic_
|
||||
```
|
||||
|
||||
Another example, for **_bold italic_**:
|
||||
|
||||
Do **NOT** use:
|
||||
|
||||
|
||||
``` <!---markdown-->
|
||||
***this text is bold italic*** <=== no thank you
|
||||
```
|
||||
|
||||
Instead use:
|
||||
|
||||
``` <!---markdown-->
|
||||
**_this text is bold italic_**
|
||||
```
|
||||
|
||||
or:
|
||||
|
||||
``` <!---markdown-->
|
||||
_**this text is bold italic**_
|
||||
```
|
||||
|
||||
**BTW**: the astute reader might notice that some cases of `*` for italic might
|
||||
have slipped through. We do ask you, however, to please observe this rule, as
|
||||
best you can.
|
||||
**BTW**: the astute reader might notice that some cases of `*` for
|
||||
italic might have slipped through. We do ask you, however, to please
|
||||
observe this rule, as best you can.
|
||||
Reference in new issue
Block a user