Warcraft Logs
Decorative background for title

Enhanced Markdown

Last updated: November 18, 2022

Some parts of Warcraft Logs let you use Enhanced Markdown when writing content (in particular, article titles and bodies can use Enhanced Markdown).

Enhanced Markdown has the typical properties of markdown, as well as access to extra components via angle bracket syntax (< and >).

The SiteTitle component

The <SiteTitle> component lets you write the current name of the site that the article is being viewed on.

<SiteTitle>Warcraft Logs

The GameName component

The <GameName> component lets you write the current name of the game that the site the article is being viewed on centers around.

<GameName>World of Warcraft

The <SupportEmailLink> component lets you insert an email link for the support email address of the site that the article is being viewed on.

<SupportEmailLink>support@warcraftlogs.com

You can also customise the text that is displayed.

<SupportEmailLink>Send an email to the <SiteTitle> support team!</SupportEmailLink>

Send an email to the Warcraft Logs support team!

The <DiscordInviteLink> component lets you insert an invite link for the Discord server of the site that the article is being viewed on.

<DiscordInviteLink>Discord

You can also customise the text that is displayed.

<DiscordInviteLink>Join the <SiteTitle> Discord!</DiscordInviteLink>

Join the Warcraft Logs Discord!

The Styled component

The <Styled> component lets you display styled text based on the type property.

The <Styled type="Shaman">Shaman</Styled> hits the <Styled type="Boss">Boss</Styled>.

The Shaman hits the Boss.

However, extra shorthand components have been added to make this more concise:

The <Shaman>Shaman</Shaman> hits the <Boss>Boss</Boss>.

The Shaman hits the Boss.

And, if you don't want to customise the colored text at all, you can leave it out and make things even more concise:

The <Shaman> hits the <Boss>.

The Shaman hits the Boss.

Here is an example list of all styles available across all games:

Pet, NPC, Boss, Primary, Death Knight, Demon Hunter, Druid, Evoker, Hunter, Mage, Monk, Paladin, Priest, Rogue, Shaman, Warlock, Warrior, Legendary, Astounding, Magnificent, Epic, Rare, Uncommon, Common, Exploit, Banned, Kill, Wipe, Estimate, Physical, Holy, Fire, Nature, Frost, Shadow, Arcane, Chaos, Alliance, Horde, Arcanist, Archer, Astrologian, Bard, Black Mage, Blue Mage, Conjurer, Dancer, Dark Knight, Dragoon, Gladiator, Gunbreaker, Lancer, Limit Break, Machinist, Marauder, Ninja, Pugilist, Reaper, Red Mage, Sage, Samurai, Scholar, Summoner, Thaumaturge, White Mage, Earth, Air, RDPS, ADPS, Dragon Knight, Templar, Sorcerer, Warden, Necromancer, Nightblade, Werewolf, Sith Sorcerer, Jedi Sage, Sith Assassin, Jedi Shadow, Sith Juggernaut, Jedi Guardian, Sith Marauder, Jedi Sentinel, Operative, Scoundrel, Sniper, Gunslinger, Powertech, Vanguard, Mercenary, Commando

The ActorIcon component

You can add player spec icons within text using the <ActorIcon> component. Set the type property to be the class/spec combination that you want to show an icon for.

<ActorIcon type="Druid">Druid

<ActorIcon type="Druid-Balance">Druid Balance

<ActorIcon type="Druid-Restoration">Druid Restoration

Healers: <ActorIcon type="Druid-Restoration"> <ActorIcon type="Shaman-Restoration"> <ActorIcon type="Paladin-Holy"> <ActorIcon type="Priest-Holy"> <ActorIcon type="Priest-Disc"> <ActorIcon type="Monk-Mistweaver">

Healers: Druid RestorationShaman RestorationPaladin HolyPriest HolyPriest DiscMonk Mistweaver

You can also add text inside the component, which will ensure that the text is appropriately colored based on the spec that the icon is showing:

There is a demon hunter named <ActorIcon type="DemonHunter-Vengeance">Xyä</ActorIcon> and he likes to tank.
There is a druid named <ActorIcon type="Druid-Restoration">Flucloxx</ActorIcon> and he likes to heal.
There is a hunter named <ActorIcon type="Hunter-Marksmanship">Rustedarrow</ActorIcon> and he likes to deal damage.

There is a demon hunter named DemonHunter VengeanceXyä and he likes to tank. There is a druid named Druid RestorationFlucloxx and he likes to heal. There is a hunter named Hunter MarksmanshipRustedarrow and he likes to deal damage.

The AbilityIcon component

You can add ability icons within text using the <AbilityIcon> component. It requires both the id of the spell and its icon. Additionally, set the type property to color based on spell school.

<AbilityIcon id={350631} icon="ability_maldraxxus_demonhunter.jpg">

<AbilityIcon id={12654} icon="spell_fire_incinerate.jpg" type="Fire">

You can also add text inside the component to name the ability which will be colored based on the given type.

<AbilityIcon id={350631} icon="ability_maldraxxus_demonhunter.jpg">Fodder to the Flame</AbilityIcon> was the Necrolord Covenant ability for <ActorIcon type="DemonHunter">Demon Hunters</ActorIcon>.

was the Necrolord Covenant ability for DemonHunterDemon Hunters.

The EncounterIcon component

You can add encounter icons within text using the <EncounterIcon> component. Set the id property to be the Warcraft Logs encounter id you want to show an icon for. You can check the rankings of an encounter to find its id appended to the url, e.g. boss=2512.

<EncounterIcon id={2537}>

<EncounterIcon id={2607}>

<EncounterIcon id={12441}>

You can also add text inside the component.

<EncounterIcon id={2537}>The Jailer</EncounterIcon> is the final boss of Sepulcher of the First Ones.
<EncounterIcon id={2607}>Raszageth the Storm-Eater</EncounterIcon> is the final boss of Vault of the Incarnates.
<EncounterIcon id={12441}>Tazavesh: Streets of Wonder</EncounterIcon> is a Shadowlands mythic dungeon.

is the final boss of Sepulcher of the First Ones.
is the final boss of Vault of the Incarnates.
is a Shadowlands mythic dungeon.

The ItemIcon component

You can add item icons within text using the <ItemIcon> component. It requires both the id of the spell and its icon. Additionally, set the type property to color based on rarity, ranging from Common to Artifact.

<ItemIcon id={11944} icon="inv_boots_06.jpg" />

<ItemIcon id={32837} icon="inv_weapon_glave_01.jpg" />

You can also add text inside the component to name the ability which will be colored based on the given type.

<ItemIcon id={32837} icon="inv_weapon_glave_01.jpg" type="Legendary">Warglaive of Azzinoth</ItemIcon> drops from <EncounterIcon id={609}>Illidan Stormrage</EncounterIcon>.

drops from
.

You can pass extraInfo to pass customizations such as sockets, enchants etc. in the wowhead tooltip format.

<ItemIcon id={188892} icon="inv_leather_raiddemonhunterprogenitor_d_01_helm.jpg" extraInfo="pcs=188892:142207:188896:173242:188894:169069:168985:172320:188893:188899:169158:169159:186432:186433:169058:186388&spec=581&ilvl=304&transmog=166240&bonus=7359:6652:8151:8258:1524:6646:7580&gems=173128:" type="Epic">Mercurial Punisher's Hood</ItemIcon>

The If component

The <If> component wraps content that should only render for certain sites. This is useful if a help article needs to give slightly different instructions depending on what site it is being viewed on.

<If warcraft>

This paragraph will only show on Warcraft Logs (retail or classic).

</If>

If no text is shown, you must not be on Warcraft Logs!

This paragraph will only show on Warcraft Logs (retail or classic).

If no text is shown, you must not be on Warcraft Logs!

Or:

<If classicWarcraft eso>

This paragraph will only show on Warcraft Logs Classic and ESO Logs.

</If>

If no text is shown, you must not be on Warcraft Logs Classic or ESO Logs!

If no text is shown, you must not be on Warcraft Logs Classic or ESO Logs!

The Image component

You can include images with the <Image> component.

Available properties are:

  • src: URL to the image
    • Must be provided and must start with https://assets.rpglogs.com
  • alt: Description of the image
    • Must be provided
  • width: Desired width in pixels
  • height: Desired height in pixels

If src and alt are not provided, then the image will not show.

width and height are optional, and if only one is provided, then the other will be inferred based on the aspect ratio of the image.

For example:

Screenshot of our desktop client:

<Image src="https://assets.rpglogs.com/img/companion/warcraft-ingame-replay.png" alt="Desktop client being used to view the replay of a live logged fight">

Smaller:

<Image src="https://assets.rpglogs.com/img/companion/warcraft-ingame-replay.png" alt="Desktop client being used to view the replay of a live logged fight" width={150}>

Screenshot of our desktop client:

Smaller:

The DescriptionList component

The <DescriptionList> component allows you to neatly format a list of terms and their descriptions.

<DescriptionList>
<Term>Tank</Term>
<Description>A player that ensures enemies are attacking them instead of their party members, and uses defensive abilities to survive the incoming damage.</Description>
<Term>Healer</Term>
<Description>A player that uses healing abilities to restore the health of their party members and prevent them from dying.</Description>
<Term>Damage Dealer</Term>
<Description>A player that uses damaging abilities as an excuse to ignore all mechanics. See: DPS.</Description>
</DescriptionList>
Tank
A player that ensures enemies are attacking them instead of their party members, and uses defensive abilities to survive the incoming damage.
Healer
A player that uses healing abilities to restore the health of their party members and prevent them from dying.
Damage Dealer
A player that uses damaging abilities as an excuse to ignore all mechanics.

The Snippet component

Note: The examples that follow use <_Snippet instead of <Snippet as this is an article written in enhanced markdown and otherwise the examples would get unwrapped!

<Snippet> allows authors to re-use sections of markdown in multiple areas, across multiple articles. A snippet can be made in the CMS by specifying a slug and a body. Then, display that body somewhere else by embedding the snippet.

For example, if the body of the snippet with slug example-1 is:

This is an example snippet!

Then this can be embedded using:

<_Snippet slug="example-1">

This is an example snippet!

Snippets can include other markdown and components (but cannot include snippets).

For example, if the body of the snippet with slug join-discord is:

<DiscordInviteLink>Join the <SiteTitle> Discord!</DiscordInviteLink>

Then this can be embedded using:

<_Snippet slug="join-discord">
Join the Warcraft Logs Discord!

Note that the article preview page cannot unwrap snippets, so they will instead be replaced with placeholder text:

<_Snippet slug="join-discord">

~{snippet:join-discord}~

The Tile component

You can use the <Tile> component to "frame" sections for emphasis or separation (all of the examples on this page use tiles).

<Tile>

Some content that needs to be framed.

</Tile>

Some content that needs to be framed.

The Collapse component

You can use the <Collapse> component to allow content to be shown and hidden by the user. The header property must be set.

<Collapse header="Some title">

Some content.

</Collapse>
Some title

Some content.

If you format the header property like a markdown header, then you can create a more significant collapsible section.

<Collapse header="#### Some title">

Some content.

</Collapse>
Some title

Some content.

Set the isCollapsed property to {false} if you want the section to be shown when the page initially loads.

<Collapse header="Some title" isCollapsed={false}>

Some content.

</Collapse>

<Collapse header="#### Some title" isCollapsed={false}>

Some content.

</Collapse>
Some title

Some content.

Some title

Some content.

One limitation of the header property is that it cannot accept < and > markdown tags. You can still write the characters, using &lt; and &rt; respectively, but it won't render any additional markdown components.

The Arrow component

Very rarely, you might want to add an arrow to content. You can use the <Arrow> component directly with the direction property, or you can use the shorthands such as <Up>.

<Up> <Right> <Down> <Left>

The Center component

Some things, such as <Image>s, are centered automatically. If you ever need to force something to be centered, you can use the <Center> component.

<Center>

Something that makes sense to be centered for whatever reason.

</Center>

Something that makes sense to be centered for whatever reason.

The Iframe component

Useful for when you want to embed one of our widgets in a help article. For example, this is Echo's Latest Progress embed.

<Iframe src="https://www.warcraftlogs.com/embed/guild-progress-tile/latest?guild=1546&difficulty=5" width="500" height="265" />

The src parameter is required. width defaults to 100%, height defaults to 400px, and scrolling defaults to no. If the defaults work for your use case, you do not need to include them.

The Divider component

Useful to divide content with a stylized horizontal line.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque sodales. Sapien et ligula ullamcorper malesuada proin libero nunc consequat interdum. Libero volutpat sed cras ornare arcu dui vivamus arcu felis. Sagittis nisl rhoncus mattis rhoncus urna neque viverra justo. Dolor sed viverra ipsum nunc aliquet bibendum enim. Congue nisi vitae suscipit tellus mauris a. Urna cursus eget nunc scelerisque viverra. Id consectetur purus ut faucibus. Arcu bibendum at varius vel pharetra vel. Convallis convallis tellus id interdum velit laoreet. Dolor morbi non arcu risus quis varius quam quisque.

<Divider>

Egestas quis ipsum suspendisse ultrices gravida dictum. Feugiat vivamus at augue eget arcu. Duis tristique sollicitudin nibh sit amet. Proin nibh nisl condimentum id venenatis a condimentum vitae. Orci porta non pulvinar neque laoreet suspendisse. Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Lectus magna fringilla urna porttitor. Turpis in eu mi bibendum. Eget sit amet tellus cras adipiscing enim eu turpis. Aliquet lectus proin nibh nisl condimentum id venenatis a condimentum. Vitae congue eu consequat ac felis donec. Bibendum est ultricies integer quis. Imperdiet dui accumsan sit amet nulla. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque sodales. Sapien et ligula ullamcorper malesuada proin libero nunc consequat interdum. Libero volutpat sed cras ornare arcu dui vivamus arcu felis. Sagittis nisl rhoncus mattis rhoncus urna neque viverra justo. Dolor sed viverra ipsum nunc aliquet bibendum enim. Congue nisi vitae suscipit tellus mauris a. Urna cursus eget nunc scelerisque viverra. Id consectetur purus ut faucibus. Arcu bibendum at varius vel pharetra vel. Convallis convallis tellus id interdum velit laoreet. Dolor morbi non arcu risus quis varius quam quisque.

Egestas quis ipsum suspendisse ultrices gravida dictum. Feugiat vivamus at augue eget arcu. Duis tristique sollicitudin nibh sit amet. Proin nibh nisl condimentum id venenatis a condimentum vitae. Orci porta non pulvinar neque laoreet suspendisse. Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Lectus magna fringilla urna porttitor. Turpis in eu mi bibendum. Eget sit amet tellus cras adipiscing enim eu turpis. Aliquet lectus proin nibh nisl condimentum id venenatis a condimentum. Vitae congue eu consequat ac felis donec. Bibendum est ultricies integer quis. Imperdiet dui accumsan sit amet nulla. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra.

The Bar component

You can add bars using the <Bar> component. It requires percent indicating its width relative to its container and optionally accepts a type for its color, defaulting to Physical.

<Bar percent={33}>

<Bar percent={44} type="DemonHunter">

<Bar percent={55} type="Fire">

Additionally, you may add context via a tooltip by passing a label.

<Bar percent={55} label="55% Physical damage">

Labels can also include other components. Take note of the different " and ' needed to properly escape content.

<Bar type="Monk" percent={25} label="<ActorIcon type='Monk-Brewmaster'>Someone</ActorIcon> fell into holes 25 times on <EncounterIcon id={2537}>The Jailer</EncounterIcon>">