diff --git a/shared/naturalcrit/markdown.js b/shared/naturalcrit/markdown.js
index 592de4896..fdc1b06ce 100644
--- a/shared/naturalcrit/markdown.js
+++ b/shared/naturalcrit/markdown.js
@@ -359,6 +359,7 @@ const processStyleTags = (string)=>{
 
 	const id         = _.remove(tags, (tag)=>tag.startsWith('#')).map((tag)=>tag.slice(1))[0];
 	const classes    = _.remove(tags, (tag)=>(!tag.includes(':')) && (!tag.includes('=')));
+	console.log(classes);
 	let attributes = _.remove(tags, (tag)=>(!tag.includes(':')) && (!tag.includes('#')));
 	const styles     = tags?.length ? tags.map((tag)=>tag.replace(/:"?([^"]*)"?/g, ':$1;').trim()) : [];
 
@@ -366,10 +367,10 @@ const processStyleTags = (string)=>{
 		attributes = attributes.map((attr)=>attr.replace(/="?([^"]*)"?/g, '="$1"'));
 	}
 
-	return `${classes.join(' ')}" ` +
+	return `${classes.join(' ').trim()}" ` +
 		`${id ? `id="${id}"` : ''} ` +
-		`${styles?.length ? `style="${styles.join(' ')}"` : ''}` +
-		`${attributes?.length ? ` ${attributes.join(' ')}` : ''}`;
+		`${styles?.length ? `style="${styles.join(' ').trim()}"` : ''}` +
+		`${attributes?.length ? ` ${attributes.join(' ').trim()}` : ''}`;
 };
 
 module.exports = {
diff --git a/tests/markdown/mustache-syntax.test.js b/tests/markdown/mustache-syntax.test.js
index fc531cfdc..790af84f6 100644
--- a/tests/markdown/mustache-syntax.test.js
+++ b/tests/markdown/mustache-syntax.test.js
@@ -130,6 +130,18 @@ describe('Inline: When using the Inline syntax {{ }}', ()=>{
 		const rendered = Markdown.render(source).trimReturns();
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p><img class=" "  style="position:absolute; bottom:20px; left:130px; width:220px;" a="b and c" d="e" src="https://i.imgur.com/hMna6G0.png" alt="homebrew mug"></p>`);
 	});
+
+	it('Render a span with added attributes', function() {
+		const source = 'Text and {{pen,#author,color:orange,font-family:"trebuchet ms",a="b and c",d=e, text}} and more text!';
+		const rendered = Markdown.render(source);
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>Text and <span class="inline-block pen" id="author" style="color:orange; font-family:trebuchet ms;" a="b and c" d="e">text</span> and more text!</p>\n');
+	});
+
+	it('Render a div with added attributes', function() {
+		const source = '{{pen,#author,color:orange,font-family:"trebuchet ms",a="b and c",d=e\nText and text and more text!\n}}\n';
+		const rendered = Markdown.render(source);
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<div class="block pen" id="author" style="color:orange; font-family:trebuchet ms;" a="b and c" d="e"><p>Text and text and more text!</p>\n</div>');
+	});
 });
 
 //  BLOCK SYNTAX