diff --git a/package.json b/package.json
index a47f4a0c..cfb94dc4 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,7 @@
 	},
 	"dependencies": {
 		"emoji-picker-element": "1.12.1",
-		"linkifyjs": "2.1.9"
+		"micromark": "^3.1.0",
+		"micromark-extension-gfm": "^2.0.1"
 	}
 }
diff --git a/src/components/FormatMessage/FormatMessage.vue b/src/components/FormatMessage/FormatMessage.vue
index a4a59c60..ac82f6eb 100644
--- a/src/components/FormatMessage/FormatMessage.vue
+++ b/src/components/FormatMessage/FormatMessage.vue
@@ -3,31 +3,27 @@
 		class="vac-format-message-wrapper"
 		:class="{ 'vac-text-ellipsis': singleLine }"
 	>
-		<div
-			v-if="!textFormatting.disabled"
-			:class="{ 'vac-text-ellipsis': singleLine }"
-		>
+		<template v-for="(message, i) in parsedMessage" :key="i">
 			<div
-				v-for="(message, i) in linkifiedMessage"
-				:key="i"
+				v-if="message.markdown"
+				class="markdown"
+				@click="openTag"
+				v-html="message.value"
+			/>
+			<div
+				v-else
 				class="vac-format-container"
+				:class="{ 'vac-text-ellipsis': singleLine }"
 			>
 				<component
 					:is="message.url ? 'a' : 'span'"
 					:class="{
 						'vac-text-ellipsis': singleLine,
-						'vac-text-bold': message.bold,
-						'vac-text-italic': deleted || message.italic,
-						'vac-text-strike': message.strike,
-						'vac-text-underline': message.underline,
-						'vac-text-inline-code': !singleLine && message.inline,
-						'vac-text-multiline-code': !singleLine && message.multiline,
 						'vac-text-tag': !singleLine && !reply && message.tag
 					}"
 					:href="message.href"
 					:target="message.href ? linkOptions.target : null"
 					:rel="message.href ? linkOptions.rel : null"
-					@click="openTag(message)"
 				>
 					<template v-if="deleted">
 						<slot
@@ -56,23 +52,22 @@
 							/>
 						</div>
 						<div class="vac-image-link-message">
-							<span>{{ message.value }}</span>
+							{{ message.value }}
 						</div>
 					</template>
 					<template v-else>
-						<span v-html="message.value" />
+						{{ message.value }}
 					</template>
 				</component>
 			</div>
-		</div>
-		<div v-else v-html="formattedContent" />
+		</template>
 	</div>
 </template>
 
 <script>
 import SvgIcon from '../SvgIcon/SvgIcon'
 
-import formatString from '../../utils/format-string'
+import markdown from '../../utils/markdown'
 import { IMAGE_TYPES } from '../../utils/constants'
 
 export default {
@@ -97,38 +92,36 @@ export default {
 	emits: ['open-user-tag'],
 
 	computed: {
-		linkifiedMessage() {
+		parsedMessage() {
 			if (this.deleted) {
 				return [{ value: this.textMessages.MESSAGE_DELETED }]
 			}
 
-			const message = formatString(
-				this.formatTags(this.content),
-				this.linkify && !this.linkOptions.disabled,
-				this.textFormatting
-			)
+			let options
+			if (!this.textFormatting.disabled) {
+				options = {
+					textFormatting: {
+						linkify: this.linkify,
+						linkOptions: this.linkOptions,
+						singleLine: this.singleLine,
+						reply: this.reply,
+						users: this.users,
+						...this.textFormatting
+					}
+				}
+			} else {
+				options = {}
+			}
+
+			const message = markdown(this.content, options)
 
 			message.forEach(m => {
-				m.url = this.checkType(m, 'url')
-				m.bold = this.checkType(m, 'bold')
-				m.italic = this.checkType(m, 'italic')
-				m.strike = this.checkType(m, 'strike')
-				m.underline = this.checkType(m, 'underline')
-				m.inline = this.checkType(m, 'inline-code')
-				m.multiline = this.checkType(m, 'multiline-code')
+				m.markdown = this.checkType(m, 'markdown')
 				m.tag = this.checkType(m, 'tag')
 				m.image = this.checkImageType(m)
-				m.value = this.replaceEmojiByElement(m.value)
 			})
 
 			return message
-		},
-		formattedContent() {
-			if (this.deleted) {
-				return this.textMessages.MESSAGE_DELETED
-			} else {
-				return this.formatTags(this.content)
-			}
 		}
 	},
 
@@ -162,63 +155,12 @@ export default {
 				image.removeEventListener('load', onLoad)
 			}
 		},
-		formatTags(content) {
-			const firstTag = '<usertag>'
-			const secondTag = '</usertag>'
-
-			const usertags = [...content.matchAll(new RegExp(firstTag, 'gi'))].map(
-				a => a.index
-			)
-
-			const initialContent = content
-
-			usertags.forEach(index => {
-				const userId = initialContent.substring(
-					index + firstTag.length,
-					initialContent.indexOf(secondTag, index)
-				)
-
-				const user = this.users.find(user => user._id === userId)
-
-				content = content.replaceAll(userId, `@${user?.username || 'unknown'}`)
-			})
-
-			return content
-		},
-		openTag(message) {
-			if (!this.singleLine && this.checkType(message, 'tag')) {
-				const user = this.users.find(
-					u => message.value.indexOf(u.username) !== -1
-				)
+		openTag(event) {
+			const userId = event.target.getAttribute('data-user-id')
+			if (!this.singleLine && userId) {
+				const user = this.users.find(u => String(u._id) === userId)
 				this.$emit('open-user-tag', user)
 			}
-		},
-		replaceEmojiByElement(value) {
-			let emojiSize
-			if (this.singleLine) {
-				emojiSize = 16
-			} else {
-				const onlyEmojis = this.containsOnlyEmojis()
-				emojiSize = onlyEmojis ? 28 : 20
-			}
-
-			return value.replaceAll(
-				/[\p{Extended_Pictographic}\u{1F3FB}-\u{1F3FF}\u{1F9B0}-\u{1F9B3}]/gu,
-				v => {
-					return `<span style="font-size: ${emojiSize}px">${v}</span>`
-				}
-			)
-		},
-		containsOnlyEmojis() {
-			const onlyEmojis = this.content.replace(
-				new RegExp('[\u0000-\u1eeff]', 'g'),
-				''
-			)
-			const visibleChars = this.content.replace(
-				new RegExp('[\n\rs]+|( )+', 'g'),
-				''
-			)
-			return onlyEmojis.length === visibleChars.length
 		}
 	}
 }
diff --git a/src/lib/ChatWindow.vue b/src/lib/ChatWindow.vue
index cfff6ce2..d57286c0 100644
--- a/src/lib/ChatWindow.vue
+++ b/src/lib/ChatWindow.vue
@@ -183,13 +183,7 @@ export default {
 		textFormatting: {
 			type: [Object, String],
 			default: () => ({
-				disabled: false,
-				italic: '_',
-				bold: '*',
-				strike: '~',
-				underline: '°',
-				multilineCode: '```',
-				inlineCode: '`'
+				disabled: false
 			})
 		},
 		linkOptions: {
diff --git a/src/styles/helper.scss b/src/styles/helper.scss
index 5683b364..d32c3dfb 100644
--- a/src/styles/helper.scss
+++ b/src/styles/helper.scss
@@ -84,44 +84,6 @@
 	text-overflow: ellipsis;
 }
 
-.vac-text-bold {
-	font-weight: bold;
-}
-
-.vac-text-italic {
-	font-style: italic;
-}
-
-.vac-text-strike {
-	text-decoration: line-through;
-}
-
-.vac-text-underline {
-	text-decoration: underline;
-}
-
-.vac-text-inline-code {
-	display: inline-block;
-	font-size: 12px;
-	color: var(--chat-markdown-color);
-	background: var(--chat-markdown-bg);
-	border: 1px solid var(--chat-markdown-border);
-	border-radius: 3px;
-	margin: 2px 0;
-	padding: 2px 3px;
-}
-
-.vac-text-multiline-code {
-	display: block;
-	font-size: 12px;
-	color: var(--chat-markdown-color-multi);
-	background: var(--chat-markdown-bg);
-	border: 1px solid var(--chat-markdown-border);
-	border-radius: 3px;
-	margin: 4px 0;
-	padding: 7px;
-}
-
 .vac-text-tag {
 	color: var(--chat-message-color-tag);
 	cursor: pointer;
diff --git a/src/styles/index.scss b/src/styles/index.scss
index e2c9a053..f08a3295 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,6 +1,7 @@
 @import 'animation';
 @import 'menu';
 @import 'helper';
+@import 'markdown';
 
 @import '../lib/ChatWindow';
 
diff --git a/src/styles/markdown.scss b/src/styles/markdown.scss
new file mode 100644
index 00000000..17c04710
--- /dev/null
+++ b/src/styles/markdown.scss
@@ -0,0 +1,40 @@
+.markdown {
+	p {
+		margin: 0;
+	}
+
+	ol {
+		display: flex;
+		flex-direction: column;
+		list-style-position: inside;
+	}
+
+	ul {
+		display: flex;
+		flex-direction: column;
+	}
+
+	code {
+		display: block;
+		font-size: 12px;
+		color: var(--chat-markdown-color-multi);
+		background: var(--chat-markdown-bg);
+		border: 1px solid var(--chat-markdown-border);
+		border-radius: 3px;
+		margin: 4px 0;
+		padding: 7px;
+	}
+
+	p {
+		code {
+			display: inline-block;
+			font-size: 12px;
+			color: var(--chat-markdown-color);
+			background: var(--chat-markdown-bg);
+			border: 1px solid var(--chat-markdown-border);
+			border-radius: 3px;
+			margin: 2px 0;
+			padding: 2px 3px;
+		}
+	}
+}
diff --git a/src/utils/format-string.js b/src/utils/format-string.js
deleted file mode 100644
index 44c2d023..00000000
--- a/src/utils/format-string.js
+++ /dev/null
@@ -1,206 +0,0 @@
-import * as linkify from 'linkifyjs'
-// require('linkifyjs/plugins/hashtag')(linkify)
-
-export default (text, doLinkify, textFormatting) => {
-	const typeMarkdown = {
-		bold: textFormatting.bold,
-		italic: textFormatting.italic,
-		strike: textFormatting.strike,
-		underline: textFormatting.underline,
-		multilineCode: textFormatting.multilineCode,
-		inlineCode: textFormatting.inlineCode
-	}
-
-	const pseudoMarkdown = {
-		[typeMarkdown.bold]: {
-			end: '\\' + typeMarkdown.bold,
-			allowed_chars: '.',
-			type: 'bold'
-		},
-		[typeMarkdown.italic]: {
-			end: typeMarkdown.italic,
-			allowed_chars: '.',
-			type: 'italic'
-		},
-		[typeMarkdown.strike]: {
-			end: typeMarkdown.strike,
-			allowed_chars: '.',
-			type: 'strike'
-		},
-		[typeMarkdown.underline]: {
-			end: typeMarkdown.underline,
-			allowed_chars: '.',
-			type: 'underline'
-		},
-		[typeMarkdown.multilineCode]: {
-			end: typeMarkdown.multilineCode,
-			allowed_chars: '(.|\n)',
-			type: 'multiline-code'
-		},
-		[typeMarkdown.inlineCode]: {
-			end: typeMarkdown.inlineCode,
-			allowed_chars: '.',
-			type: 'inline-code'
-		},
-		'<usertag>': {
-			allowed_chars: '.',
-			end: '</usertag>',
-			type: 'tag'
-		}
-	}
-
-	const json = compileToJSON(text, pseudoMarkdown)
-
-	const html = compileToHTML(json, pseudoMarkdown)
-
-	const result = [].concat.apply([], html)
-
-	if (doLinkify) linkifyResult(result)
-
-	return result
-}
-
-function compileToJSON(str, pseudoMarkdown) {
-	let result = []
-	let minIndexOf = -1
-	let minIndexOfKey = null
-
-	let links = linkify.find(str)
-	let minIndexFromLink = false
-
-	if (links.length > 0) {
-		minIndexOf = str.indexOf(links[0].value)
-		minIndexFromLink = true
-	}
-
-	Object.keys(pseudoMarkdown).forEach(startingValue => {
-		const io = str.indexOf(startingValue)
-		if (io >= 0 && (minIndexOf < 0 || io < minIndexOf)) {
-			minIndexOf = io
-			minIndexOfKey = startingValue
-			minIndexFromLink = false
-		}
-	})
-
-	if (minIndexFromLink && minIndexOfKey !== -1) {
-		let strLeft = str.substr(0, minIndexOf)
-		let strLink = str.substr(minIndexOf, links[0].value.length)
-		let strRight = str.substr(minIndexOf + links[0].value.length)
-		result.push(strLeft)
-		result.push(strLink)
-		result = result.concat(compileToJSON(strRight, pseudoMarkdown))
-		return result
-	}
-
-	if (minIndexOfKey) {
-		let strLeft = str.substr(0, minIndexOf)
-		const char = minIndexOfKey
-		let strRight = str.substr(minIndexOf + char.length)
-
-		if (str.replace(/\s/g, '').length === char.length * 2) {
-			return [str]
-		}
-
-		const match = strRight.match(
-			new RegExp(
-				'^(' +
-					(pseudoMarkdown[char].allowed_chars || '.') +
-					'*' +
-					(pseudoMarkdown[char].end ? '?' : '') +
-					')' +
-					(pseudoMarkdown[char].end
-						? '(' + pseudoMarkdown[char].end + ')'
-						: ''),
-				'm'
-			)
-		)
-		if (!match || !match[1]) {
-			strLeft = strLeft + char
-			result.push(strLeft)
-		} else {
-			if (strLeft) {
-				result.push(strLeft)
-			}
-			const object = {
-				start: char,
-				content: compileToJSON(match[1], pseudoMarkdown),
-				end: match[2],
-				type: pseudoMarkdown[char].type
-			}
-			result.push(object)
-			strRight = strRight.substr(match[0].length)
-		}
-		result = result.concat(compileToJSON(strRight, pseudoMarkdown))
-		return result
-	} else {
-		if (str) {
-			return [str]
-		} else {
-			return []
-		}
-	}
-}
-
-function compileToHTML(json, pseudoMarkdown) {
-	const result = []
-
-	json.forEach(item => {
-		if (typeof item === 'string') {
-			result.push({ types: [], value: item })
-		} else {
-			if (pseudoMarkdown[item.start]) {
-				result.push(parseContent(item))
-			}
-		}
-	})
-
-	return result
-}
-
-function parseContent(item) {
-	const result = []
-	iterateContent(item, result, [])
-	return result
-}
-
-function iterateContent(item, result, types) {
-	item.content.forEach(it => {
-		if (typeof it === 'string') {
-			result.push({
-				types: removeDuplicates(types.concat([item.type])),
-				value: it
-			})
-		} else {
-			iterateContent(
-				it,
-				result,
-				removeDuplicates([it.type].concat([item.type]).concat(types))
-			)
-		}
-	})
-}
-
-function removeDuplicates(items) {
-	return [...new Set(items)]
-}
-
-function linkifyResult(array) {
-	const result = []
-
-	array.forEach(arr => {
-		const links = linkify.find(arr.value)
-
-		if (links.length) {
-			const spaces = arr.value.replace(links[0].value, '')
-			result.push({ types: arr.types, value: spaces })
-
-			arr.types = ['url'].concat(arr.types)
-			arr.href = links[0].href
-			arr.value = links[0].value
-		}
-
-		result.push(arr)
-	})
-
-	return result
-}
diff --git a/src/utils/markdown/constants.js b/src/utils/markdown/constants.js
new file mode 100644
index 00000000..13600a0a
--- /dev/null
+++ b/src/utils/markdown/constants.js
@@ -0,0 +1,161 @@
+/**
+ * Character codes.
+ *
+ * This module is compiled away!
+ *
+ * micromark works based on character codes.
+ * This module contains constants for the ASCII block and the replacement
+ * character.
+ * A couple of them are handled in a special way, such as the line endings
+ * (CR, LF, and CR+LF, commonly known as end-of-line: EOLs), the tab (horizontal
+ * tab) and its expansion based on what column it’s at (virtual space),
+ * and the end-of-file (eof) character.
+ * As values are preprocessed before handling them, the actual characters LF,
+ * CR, HT, and NUL (which is present as the replacement character), are
+ * guaranteed to not exist.
+ *
+ * Unicode basic latin block.
+ *
+ * Source: https://github.com/micromark/micromark/blob/main/packages/micromark-util-symbol/codes.js
+ */
+export const codes = {
+	carriageReturn: -5,
+	lineFeed: -4,
+	carriageReturnLineFeed: -3,
+	horizontalTab: -2,
+	virtualSpace: -1,
+	eof: null,
+	nul: 0,
+	soh: 1,
+	stx: 2,
+	etx: 3,
+	eot: 4,
+	enq: 5,
+	ack: 6,
+	bel: 7,
+	bs: 8,
+	ht: 9, // `\t`
+	lf: 10, // `\n`
+	vt: 11, // `\v`
+	ff: 12, // `\f`
+	cr: 13, // `\r`
+	so: 14,
+	si: 15,
+	dle: 16,
+	dc1: 17,
+	dc2: 18,
+	dc3: 19,
+	dc4: 20,
+	nak: 21,
+	syn: 22,
+	etb: 23,
+	can: 24,
+	em: 25,
+	sub: 26,
+	esc: 27,
+	fs: 28,
+	gs: 29,
+	rs: 30,
+	us: 31,
+	space: 32,
+	exclamationMark: 33, // `!`
+	quotationMark: 34, // `"`
+	numberSign: 35, // `#`
+	dollarSign: 36, // `$`
+	percentSign: 37, // `%`
+	ampersand: 38, // `&`
+	apostrophe: 39, // `'`
+	leftParenthesis: 40, // `(`
+	rightParenthesis: 41, // `)`
+	asterisk: 42, // `*`
+	plusSign: 43, // `+`
+	comma: 44, // `,`
+	dash: 45, // `-`
+	dot: 46, // `.`
+	slash: 47, // `/`
+	digit0: 48, // `0`
+	digit1: 49, // `1`
+	digit2: 50, // `2`
+	digit3: 51, // `3`
+	digit4: 52, // `4`
+	digit5: 53, // `5`
+	digit6: 54, // `6`
+	digit7: 55, // `7`
+	digit8: 56, // `8`
+	digit9: 57, // `9`
+	colon: 58, // `:`
+	semicolon: 59, // `;`
+	lessThan: 60, // `<`
+	equalsTo: 61, // `=`
+	greaterThan: 62, // `>`
+	questionMark: 63, // `?`
+	atSign: 64, // `@`
+	uppercaseA: 65, // `A`
+	uppercaseB: 66, // `B`
+	uppercaseC: 67, // `C`
+	uppercaseD: 68, // `D`
+	uppercaseE: 69, // `E`
+	uppercaseF: 70, // `F`
+	uppercaseG: 71, // `G`
+	uppercaseH: 72, // `H`
+	uppercaseI: 73, // `I`
+	uppercaseJ: 74, // `J`
+	uppercaseK: 75, // `K`
+	uppercaseL: 76, // `L`
+	uppercaseM: 77, // `M`
+	uppercaseN: 78, // `N`
+	uppercaseO: 79, // `O`
+	uppercaseP: 80, // `P`
+	uppercaseQ: 81, // `Q`
+	uppercaseR: 82, // `R`
+	uppercaseS: 83, // `S`
+	uppercaseT: 84, // `T`
+	uppercaseU: 85, // `U`
+	uppercaseV: 86, // `V`
+	uppercaseW: 87, // `W`
+	uppercaseX: 88, // `X`
+	uppercaseY: 89, // `Y`
+	uppercaseZ: 90, // `Z`
+	leftSquareBracket: 91, // `[`
+	backslash: 92, // `\`
+	rightSquareBracket: 93, // `]`
+	caret: 94, // `^`
+	underscore: 95, // `_`
+	graveAccent: 96, // `` ` ``
+	lowercaseA: 97, // `a`
+	lowercaseB: 98, // `b`
+	lowercaseC: 99, // `c`
+	lowercaseD: 100, // `d`
+	lowercaseE: 101, // `e`
+	lowercaseF: 102, // `f`
+	lowercaseG: 103, // `g`
+	lowercaseH: 104, // `h`
+	lowercaseI: 105, // `i`
+	lowercaseJ: 106, // `j`
+	lowercaseK: 107, // `k`
+	lowercaseL: 108, // `l`
+	lowercaseM: 109, // `m`
+	lowercaseN: 110, // `n`
+	lowercaseO: 111, // `o`
+	lowercaseP: 112, // `p`
+	lowercaseQ: 113, // `q`
+	lowercaseR: 114, // `r`
+	lowercaseS: 115, // `s`
+	lowercaseT: 116, // `t`
+	lowercaseU: 117, // `u`
+	lowercaseV: 118, // `v`
+	lowercaseW: 119, // `w`
+	lowercaseX: 120, // `x`
+	lowercaseY: 121, // `y`
+	lowercaseZ: 122, // `z`
+	leftCurlyBrace: 123, // `{`
+	verticalBar: 124, // `|`
+	rightCurlyBrace: 125, // `}`
+	tilde: 126, // `~`
+	del: 127,
+	degree: 176, // `°`
+	// Unicode Specials block.
+	byteOrderMarker: 65279,
+	// Unicode Specials block.
+	replacementCharacter: 65533 // `�`
+}
diff --git a/src/utils/markdown/index.js b/src/utils/markdown/index.js
new file mode 100644
index 00000000..bb314607
--- /dev/null
+++ b/src/utils/markdown/index.js
@@ -0,0 +1,60 @@
+import { micromark } from 'micromark'
+import { gfm, gfmHtml } from 'micromark-extension-gfm'
+import { underline, underlineHtml } from './underline'
+import { usertag, usertagHtml } from './usertag'
+
+export default (text, { textFormatting }) => {
+	if (textFormatting) {
+		let gfmDisabled = []
+
+		if (!textFormatting.linkify) {
+			gfmDisabled = ['literalAutolink', 'literalAutolinkEmail']
+		}
+
+		const markdown = micromark(
+			text.replaceAll('<usertag>', '<@').replaceAll('</usertag>', '>'),
+			{
+				extensions: [
+					{
+						...gfm(),
+						disable: { null: gfmDisabled }
+					},
+					underline,
+					usertag
+				],
+				htmlExtensions: [
+					gfmHtml(),
+					underlineHtml,
+					usertagHtml(textFormatting.users)
+				]
+			}
+		)
+
+		if (textFormatting.singleLine) {
+			const element = document.createElement('div')
+
+			element.innerHTML = markdown
+
+			return [
+				{
+					types: [],
+					value: element.innerText
+				}
+			]
+		}
+
+		return [
+			{
+				types: ['markdown'],
+				value: markdown
+			}
+		]
+	}
+
+	return [
+		{
+			types: [],
+			value: text
+		}
+	]
+}
diff --git a/src/utils/markdown/underline.js b/src/utils/markdown/underline.js
new file mode 100644
index 00000000..d10635cc
--- /dev/null
+++ b/src/utils/markdown/underline.js
@@ -0,0 +1,73 @@
+import { codes } from './constants'
+
+const underlineTokenize = (effects, ok, nok) => {
+	const inside = code => {
+		if (
+			code === codes.carriageReturn ||
+			code === codes.lineFeed ||
+			code === codes.carriageReturnLineFeed ||
+			code === codes.eof
+		) {
+			return nok(code)
+		}
+
+		if (code === codes.backslash) {
+			effects.consume(code)
+
+			return insideEscape
+		}
+
+		if (code === codes.degree) {
+			effects.exit('underlineContent')
+			effects.enter('underlineMarker')
+			effects.consume(code)
+			effects.exit('underlineMarker')
+			effects.exit('underline')
+
+			return ok
+		}
+
+		effects.consume(code)
+
+		return inside
+	}
+
+	const insideEscape = code => {
+		if (code === codes.backslash || code === codes.degree) {
+			effects.consume(code)
+
+			return inside
+		}
+
+		return inside(code)
+	}
+
+	const begin = code => (code === codes.degree ? nok(code) : inside(code))
+
+	return code => {
+		effects.enter('underline')
+		effects.enter('underlineMarker')
+		effects.consume(code)
+		effects.exit('underlineMarker')
+		effects.enter('underlineContent', { contentType: 'string' })
+
+		return begin
+	}
+}
+
+const underlineConstruct = { name: 'underline', tokenize: underlineTokenize }
+
+export const underline = { text: { 176: underlineConstruct } } // 176 is the degree sign
+
+export const underlineHtml = {
+	enter: {
+		underline() {
+			this.tag('<u>')
+		}
+	},
+	exit: {
+		underline() {
+			this.tag('</u>')
+		}
+	}
+}
diff --git a/src/utils/markdown/usertag.js b/src/utils/markdown/usertag.js
new file mode 100644
index 00000000..a787e32b
--- /dev/null
+++ b/src/utils/markdown/usertag.js
@@ -0,0 +1,84 @@
+import { codes } from './constants'
+
+const usertagTokenize = (effects, ok, nok) => {
+	const inside = code => {
+		if (
+			code === codes.carriageReturn ||
+			code === codes.lineFeed ||
+			code === codes.carriageReturnLineFeed ||
+			code === codes.eof
+		) {
+			return nok(code)
+		}
+
+		if (code === codes.backslash) {
+			effects.consume(code)
+
+			return insideEscape
+		}
+
+		if (code === codes.greaterThan) {
+			effects.exit('usertagContent')
+			effects.enter('usertagMarker')
+			effects.consume(code)
+			effects.exit('usertagMarker')
+			effects.exit('usertag')
+
+			return ok
+		}
+
+		effects.consume(code)
+
+		return inside
+	}
+
+	const insideEscape = code => {
+		if (code === codes.backslash || code === codes.greaterThan) {
+			effects.consume(code)
+
+			return inside
+		}
+
+		return inside(code)
+	}
+
+	const begin = code => {
+		if (code === codes.atSign) {
+			effects.consume(code)
+			effects.exit('usertagMarker')
+			effects.enter('usertagContent')
+
+			return inside
+		}
+
+		return nok(code)
+	}
+
+	return code => {
+		effects.enter('usertag')
+		effects.enter('usertagMarker')
+		effects.consume(code)
+
+		return begin
+	}
+}
+
+const usertagConstruct = { name: 'usertag', tokenize: usertagTokenize }
+
+export const usertag = { text: { 60: usertagConstruct } } // 60 is the less than sign
+
+export const usertagHtml = users => ({
+	exit: {
+		usertagContent(token) {
+			const userId = this.sliceSerialize(token)
+
+			this.tag(`<span class="vac-text-tag" data-user-id="${userId}">`)
+
+			const user = users.find(user => user._id === userId)
+
+			this.raw(`@${this.encode(user ? user.username : userId)}`)
+
+			this.tag('</span>')
+		}
+	}
+})