Help Topic: Formatting

TappedOut uses HTML formatting. Knowing how to use basic formatting commands allows you to add emphasis, links, and other cool features to your posts. Even a little bit of familiarity can give you a great deal of flexibility.

Daring Fireball has a great guide for markdown syntax that covers virtually everything you will ever need to know to use HTML formatting on this site. It's a great resource to defer to if you aren't sure what commands to use or how to use them properly.

Some syntax requires you to know the slug name of a page or object. This is derived from its URL. For example, the slug name for the card Llanowar Elves, which has URL http://tappedout.net/mtg-card/llanowar-elves/, is llanowar-elves.

Basic

Italics

The basic syntax for italic text is to use asterisks to denote what text you want italicized. For example, typing *italics* will return italics.

Bold

The basic syntax for bold text is to use double asterisks to denote what text you want bolded. For example, typing **bold** will return bold.

Italics + Bold

To get both effects, combine their syntax: ***Italics + Bold*** returns Italics + Bold.

Hyperlinks

TappedOut does not automatically convert URLs to links. You need to write out links using this syntax: [Link Text](URL).

Card Formatting

Properly tagging cards is a big part of using TappedOut. A proper tag highlights the card name as a blue link and generates a mouseover image of the card as well.

To tag a card, wrap the card's slug name (derived from its page in the site's card database and USUALLY the same as its English print name) in double brackets. For example, typing [[Island]] will return Island.

For lists (such as deck forms and binder pages), there is additional syntax available to denote specific printings and foil/nonfoil versions of cards. By default, a card's name denotes its most recent printing in nonfoil, if available.

General formatting

[[Llanowar Elves]] becomes Llanowar Elves
[[Channel + Fireball]] becomes combo:Channel + Fireball

[[Llanowar Elves|the elves yo]] becomes the elves yo

List-specific formatting

Llanowar Elves (M10) (specific printing)
Llanowar Elves *A* (altered card)
Llanowar Elves *F* (foil)
Llanowar Elves *NM* (condition) [P = Played, M = Mint, NM = Near Mint, SL = Slightly Played]
Llanowar Elves *DE* (German language card)
Llanowar Elves (M10) *F* (see a pattern?)Greven Il-Vec (TMP) *CMDR*



User Formatting

To tag a user, use this syntax:
[[user:yeaGO!]] (which produces yeaGO).

Deck Formatting

A deck's slug name can be derived from its URL. The slug name in the following URL has been highlighted:
http://tappedout.net/mtg-decks/dominus-dreamcrusher-edition/

To tag a deck, use this syntax (note that you must type the slug name of the deck to avoid accidentally linking to another deck with the same page name):
[[deck:dominus-dreamcrusher-edition]] (which produces Dominus - Dreamcrusher Edition).

Alternatively, you can use this syntax (note that you must type the slug name of the deck to avoid accidentally linking to another deck with the same page name):
[[deck-large:dominus-dreamcrusher-edition]], which produces


Dominus - Dreamcrusher Edition

Commander / EDH Epochalyptik

SCORE: 943 | 2852 COMMENTS | 252566 VIEWS | IN 452 FOLDERS




Custom Categories

By default, decks are displayed with the cards sorted into categories based on type. However, you're able to add custom categories to the cards in your deck, and you can also select a default sorting scheme for your deck.

To format a custom category, use the following syntax:
1x Island #Land
1x Storm Crow #Wincon

You may add multiple categories to the same card.

To change the default display categories, select the category set you want from the deck edit page (it's at the bottom of the first set of options). All custom categories are part of the same "custom categories" option.

##Spoiler Text (New May, 2015)

Title Show

content1
content2
##Spoiler TextYou can use spoiler text to hide large amounts of text until the reader is ready to view it. This technique is perfect for long deck descriptions!
  • Text in orange indicates any text that will be visible when the code is implemented. You may customize this text. If this text is the summary or content, it must be contained within <p> and </p> tags. You may add additional paragraphs of text by beginning a new set of <p> and </p> tags.
  • Text in light green indicates code that corresponds to the text that must be clicked to reveal the spoiler text. You must change this text for each time you implement the code, and each instance of this text within an implementation of code must be the same. This text must not be the same as the text in yellow.
  • Text in yellow indicates code that corresponds to the text that must be clicked to hide the spoiler text. You must change this text for each time you implement the code, and each instance of this text within an implementation of code must be the same. This text may not be the same as the text in light green.

Method 1: This method is more complicated, but it works on all major browsers.To use, copy and paste the following code verbatim.
<a id="show_id1" >spoiler_id1').style.display=''; document.getElementById('show_id1').style.display='none';"> <b>SHOW</b></a> <div id="spoiler_id1" style="display: none"> <a >spoiler_id1').style.display='none'; document.getElementById('show_id1').style.display='';"> <b>HIDE</b></a> <br /><br /> <p>Content goes here. The content will be hidden until the "SHOW" text is clicked.</p> <br /> </div>
Sample: SHOW
HIDE

Content goes here. The content will be hidden until the "SHOW" text is clicked.



Method 2: This code is like Method 1's code, but it produces buttons instead of link text.To use, copy and paste the following code verbatim.
<button id="but.1" >'div.1').style.display=''; document.getElementById('but.1').style.display='none';"> Show </button> <div id="div.1" style="display: none"> <button >div.1').style.display='none'; document.getElementById('but.1').style.display='';"> Hide </button> <br /> <p>Content goes here. The content will be hidden until the "Show" button is clicked.</p> </div>
Sample:

Content goes here. The content will be hidden until the "Show" button is clicked.


Method 3: This method is simpler, but it works on fewer browsers. Firefox and Internet Explorer don't support this method, so users viewing the site with either browser will see broken formatting and all of the text that is supposed to be hidden.To use, copy and paste the following code verbatim.
<details> <summary> Summary goes here. The summary text will be displayed and may be clicked to reveal the spoiler text </summary> <p>Content goes here. The content will be hidden until the summary text is clicked.</p> </details>
Sample (remember, this code is unsupported in Firefox and IE):
Summary goes here. The summary text will be displayed and may be clicked to reveal the spoiler text

Content goes here. The content will be hidden until the summary text is clicked.




Symbol Formating

Several symbols can be inserted by using the proper syntax.

[[symbol:W]]
[[symbol:U]]
[[symbol:B]]
[[symbol:R]]
[[symbol:G]]
[[symbol:0]]
[[symbol:1]]
[[symbol:2]]
......
[[symbol:PW]]
[[symbol:PU]]
[[symbol:PB]]
[[symbol:PR]]
[[symbol:PG]]
[[symbol:WU]]
[[symbol:WB]]
[[symbol:UB]]
[[symbol:UR]]
[[symbol:BR]]
[[symbol:BG]]
[[symbol:RW]]
[[symbol:RG]]
[[symbol:GW]]
[[symbol:2W]]
[[symbol:2U]]
[[symbol:2B]]
[[symbol:2R]]
[[symbol:2G]]
[[symbol:snow]]
[[symbol:infinite]]
[[symbol:loyalty-plus1]]+1
[[symbol:loyalty-plus2]]+2
[[symbol:loyalty-plus3]]+3
......
[[symbol:loyalty-minus1]]-1
[[symbol:loyalty-minus2]]-2
[[symbol:loyalty-minus3]]-3
......
[[symbol:loyalty-initial1]]1
[[symbol:loyalty-initial2]]2
[[symbol:loyalty-initial3]]3
......
[[symbol:loyalty-zero]]0