Bulletin Board software contains a number of common tags to help format that code. We've used many of these tags in this forum include a few of our own. Most of these have buttons at the top of a post that automatically apply them for you. Or being good programmers, you can type them in yourself! Notice that we said most. There are a few "secret" bb tags that you can type in, but are not in the UI. Uh oh. We've let you in on the secret. Let's get started.
Formatting
Formatting Type | How to Code It | What it looks like displayed |
---|
Bold | [b]Text[/b] | Text |
Italics | [i]Text[/i] | Text |
Underline | [u]Text[/u] | Text |
Strike Thru | [strike]Text[/strike] | Text |
Fixed Width | [tt]Text[/tt] | Text |
Color | [color=red] Red[/color] | Red |
Size | [size=9] Small[/size] | Small |
For the colors and sizes, suggested options are in the pull downs.
Quotes
You can quote with or without a name:
[quote]Foo has a bar[/quote]
Foo has a bar
[quote=The Moose]Foo has a bar[/quote]
The Moose wrote:Foo has a bar
When you click on the quote button in a post, it automatically quotes the entire text of the post using the later format.
Code
This is a development site. And code looks much better when there is syntax highlighting. Luckily, we support a variety of code tags. Code tags are so important that we have a wiki page just on
Using Code Tags
Lists
The most common form of lists is an unordered bulleted list.
[list]one[/list]
[list]two[/list]
[list]three[/list]
onetwothree
You can highlight some text and then click the list button to make it a list item. Or you can can click the list button with nothing selected to be prompted to type the list content.
There's also a secret form of list called a nested list. It doesn't work the same way as HTML so be careful. A "nested list" is more like an indented list item.
[list]one[/list]
[nestedList]
[list]a[/list]
[list]b[/list]
[/nestedList]
[list]two[/list]
[nestedList]
[list]a[/list]
[list]b[/list]
[/nestedList]
onetwo
Images
Embedding an image in a post is helpful (screenshot) or fun (a bear eating your code). Adding an image is easy:
[img]https://coderanch.com/how-to/content/Christmas_Moose3.jpg[/img]
Maybe you want the image to be smaller. No problem.
[img]https://coderanch.com/how-to/content/Christmas_Moose3.jpg width=50 height=70[/img]
You can also add 'alt' and 'title' tags for SEO benefits.
[img]https://coderanch.com/how-to/content/Christmas_Moose3.jpg width=50 height=70 alt="moose" title="moose on a stack of books"[/img]
Links
There's two formats for links. You can have just the URL or you can have a name to click on instead. There are also some special links so save you a bit of typing.
Formatting Type | How to Code It | What it looks like displayed |
---|
Just a URL | [url]https://coderanch.com[/url] | https://coderanch.com |
A URL with a name | [url=https://coderanch.com]CodeRanch[/url] | CodeRanch |
Google shortcut | [google]coderanch[/google] | coderanch |
JavaDoc shortcut | [javadoc]ArrayList[/javadoc] | java.lang.ArrayList |
Wikipedia shortcut | [wikipedia]doctor who[/wikipedia] | doctor who |
Video
You can embed Youtube or Vimeo videos right in the page:
[youtube]https://www.youtube.com/watch?v=QGgZrLB15q4[/youtube]
[vimeo]https://vimeo.com/67249020[/vimeo]
Tables
You can create a table with a border.
[table]
||header1||header2||
|cell 1|cell 2|
[/table]
header1 | header2 |
---|
cell 1 | cell 2 |
Horizontal Line
This is another secret feature. You can use a hr tag to separate your post.
[hr]