![Decorative background for title](/_next/image?url=https%3A%2F%2Fassets.rpglogs.com%2Fimg%2Fwarcraft%2Fheader-bg_sod.jpg%3Fv%3D11&w=384&q=50)
Enhanced Markdown
Some parts of Warcraft Logs Season of Discovery 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 Season of Discovery
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
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 Season of Discovery support team!
The DiscordInviteLink component
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>
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:
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">
→
<ActorIcon type="Druid-Balance">
→
<ActorIcon type="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:
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
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" type="Shadow">Fodder to the Flame</AbilityIcon> was the Necrolord Covenant ability for <ActorIcon type="DemonHunter">Demon Hunters</ActorIcon>.
The EncounterIcon component
You can add encounter icons within text using the <EncounterIcon>
component. Set the id
property to be the Warcraft Logs Season of Discovery 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.
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>.
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
- Must be provided and must start with
alt
: Description of the image- Must be provided
width
: Desired width in pixelsheight
: 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 Video component
You can include videos with the <Video>
component.
Available properties are:
url
: URL to the video embed. Currently, only YouTube is supported.- Must be provided and must include
v=
(you can copy and paste the URL from the browser)
- Must be provided and must include
For example:
<Video url="https://www.youtube.com/watch?v=dQw4w9WgXcQ">
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">
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 <
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>">