Mar 23, 17 / Ari 26, 01 06:39 UTC
Codex Circumscripto - The Total Formatting Guide ¶
Hello Asgardia,
This topic will show you, how you do use the available formats of this forum. This forum is supporting a filtered set of HTML5 Elements and a Markdown Derivate. Control Chars are not covered because they are not recommended to use.
Table of Contents:
Embedding
You can embed images into your forum posts by notating them as markdown ![alt-text](http://example.org/some/image.png)
or by constructing a <img>
-Tag.
![Alphabet Division](https://goo.gl/b4TIUw)
<img src="https://goo.gl/b4TIUw" alt="Alphabet Division" width="15%">
Formatting Text
You can format your text using empathizing markdown notations to make them bold or cursive. You can also underline or strike them. You can also colorize your text. Also a customized backgrund is possible. You can also super a part of your text or define subscriptures. Useful for notating chemical Formulas: H2O.
Here is a incomplete list of text-formatting regulations that do not turn moderators insane (so those who could easily turn a forum topic into beepworld, will not be listed here). The marquee will be the extreme:
bold
**bold text**
or __bold text__
or <strong>bold text</strong>
creates bold text.
cursive
*cursive text*
or _cursive text_
or <em>cursive text</em>
creates cursive text.
underlined
<u>underlined text</u>
does create underlined text.
striked text
<del>striked text</del>
does create striked text. ( the <strike>striked text</strike>
is also possible, but the tag is obsolete in HTML )
monospaced text
`monospaced-text`
is the default monospace
notation but can not be used inside of a hierarchy of tags due to limitations of the render-engine of the used technology. Alternatively, you may prefer to monospace with the HTML5 monospace notation: <kbd>monospace</kbd>
.
Adding colors
Adding colors to a text can be done this way:
- There is already a tag surrounding your text to colorize. This time you just define the style-attribute (<tag-name style="...">) at the opening tag and set the color definition.
- There is no surrounding tag at your text to colorize. This time you surround the targeted text with a <span style="...">your text</span> and set the color definition.
- There is already a tag with a style attribute surrounding your text to colorize. This time you just append the color definition at the end of the contents of the style attribute. Each separate definition at the style attribute must be ended with an ;.
Color definitions are:
color: websafe-colorname
for foreground colors.
background-color: websafe-colorname
for background colors.
websafe-colorname
is a placeholder for a web safe color name, a hex-notation of a color or a RGB or RGB-Alpha notation.
Web safe color names, hex-notations or RGB values can be found here: http://htmlcolorcodes.com
Color names for example are: red blue green yellow or black.
Contextual Entities
This Board supports Glyphicons. Since glyphicons are available without bootstrap, i had considered them as noteable and suitable regardless of the changes applied to this website. A definitely available icons list can be found here: http://getbootstrap.com/components/#glyphicons
<i class="glyphicon glyphicon-star-empty"></i>
<i class="glyphicon glyphicon-certificate" style="color: red"></i>
<i class="glyphicon glyphicon-scissors" style="color: blue"></i>
Layout Posts
You can structure your code by using different technics. A rich document structure makes things more readable.
headlines
# some text
or <h1>some text</h1>
creates a Level 1 Headline, you can apply additional formatting or icons as you wish.
some text
## some text
or <h2>some text</h2>
creates a Level 2 Headline, extensible in the same way as Level 1 Headlines.
some text
### some text
or <h3>some text</h3>
creates a level 3 Headline, extensible in the same way as Level 1 Headlines.
some text
#### some text
or <h4>some text</h4>
creates a level 4 Headline, extensible in the same way as Level 1 Headlines.
some text
##### some text
or <h5>some text</h5>
creates a level 5 Headline, extensible in the same way as Level 1 Headlines.
some text
###### some text
or <h6>some text</h6>
creates a level 6 Headline, extensible in the same way as Level 1 Headlines.
some text
Headings can have an anchor applied to link to: <h1 id="asgardia:important">an important part of the topic</h1>
Table of Contents:
- an important part of the topican important part of the topic
When using headings with anchors: please prefix your id with asgardia:
to prevent any collision with the underlying source of the forums. IDs can be used on any of your installed documents and all of them act as an anchor. You should be aware of the fact that id's must be unique.
Paragraphs and Linebreaks
The used markdown derivate of this forum differentiates between paragraphs and explicitly wished linebreaks. It is recommend to prefer paragraphs over linebrakes, because explicitly linebreaks are always contextually decided and a linebreak viewed from a desktop computer must not match the same purpose as viewed from a mobile device.
Paragraphs
This is a stand-alone paragraph
This is another stand-alone paragraph
Each block of text that is discontinued by an empty line (whitespaces ignored) collapses into a paragraph. Alternatively you can surround a specific block of fluid content by <p>...</p>
or by prefixing it with <p>
.
Linebreaks
This is some text
That is line-breaked as seen
This is some text
That is line-breaked as seen
This is some text<br />That is line-breaked as marked.
This is some text
That is line-breaked as marked.
Each line that is discontinued by a two spaces and one linebreak (initiated by the Enter-key of your keyboard) is treated as an exclusive linebreak. Alternatively you could use the <br />
tag at the position where the exclusive linebreak should happen.
Quoting Text or Code
A Quote can be established by prefixing a line of text to quote with >
and a single space, followed by the contents. Alternatively, you could surround the text to quote with <blockquote>...</blockquote>
. Code can be quoted by indenting every line with 4 spaces
<blockquote>Quoted Text</blockquote>
results in:
Qouted Text
and
$(body).ready(function() {
// quoted code
});
results in:
$(body).ready(function() {
// quoted code
});
Ordered and unordered lists
Markdown supports two types of lists, those who have an self-incrementing list item descriptor (so called ordered lists) and those who have a list item sign (so called unordered lists).
Defining a unordered list
In markdown you define a unordered list by prefixing the content to set as an item of the list with an +
or -
or *
followed by 3 spaces.
* List item 1
+ List item 2
- List item 3
* List item 4
- List item 1
- List item 2
- List item 3
- List item 4
Notice: The current CSS settings of this board do cut the unordered list signs, this must be fixed to work properly. But technically, unordered lists are available.
Ordered Lists
In markdown unordered lists are defined by prefixing a line with a number (it does not matter what number is used) and a dot followed by 2 spaces. The used markdown library of this board also restricts ordered lists to modern-arabic number indicated lists. (1..2..3..4..5), no roman notation, no alphabet notation.
0. First
0. Second
0. Third
- First
- Second
- Third
Alignment
You can align contents of your topic by using <p>
tags an style="text-align: center"
to align them centered or style="text-align: right"
to align them right, or style="text-align: justify"
to align them justified.