diff --git a/src/script/util/messageRenderer.test.ts b/src/script/util/messageRenderer.test.ts
index 15fadae56d8..2e19d063b06 100644
--- a/src/script/util/messageRenderer.test.ts
+++ b/src/script/util/messageRenderer.test.ts
@@ -553,11 +553,11 @@ describe('Markdown for code snippets', () => {
});
describe('Markdown for headings', () => {
- it('renders all headings the same', () => {
- expect(renderMessage('# heading')).toBe('
heading
');
- expect(renderMessage('## heading')).toBe('heading
');
- expect(renderMessage('### heading')).toBe('heading
');
- expect(renderMessage('#### heading')).toBe('heading
');
+ it('differentiate heading size by its level', () => {
+ expect(renderMessage('# heading')).toBe('heading
');
+ expect(renderMessage('## heading')).toBe('heading
');
+ expect(renderMessage('### heading')).toBe('heading
');
+ expect(renderMessage('#### heading')).toBe('heading
');
});
});
diff --git a/src/script/util/messageRenderer.ts b/src/script/util/messageRenderer.ts
index 29138ac32a4..5a9097351b9 100644
--- a/src/script/util/messageRenderer.ts
+++ b/src/script/util/messageRenderer.ts
@@ -47,7 +47,10 @@ const markdownit = new MarkdownIt('zero', {
const originalFenceRule = markdownit.renderer.rules.fence!;
-markdownit.renderer.rules.heading_open = () => '';
+markdownit.renderer.rules.heading_open = (tokens, idx) => {
+ const headingLevel = tokens[idx].tag.slice(1);
+ return `
`;
+};
markdownit.renderer.rules.heading_close = () => '
';
const originalNormalizeLink = markdownit.normalizeLink!;
diff --git a/src/style/content/conversation/message-list.less b/src/style/content/conversation/message-list.less
index ba9de5e64d7..b25d8affd7b 100644
--- a/src/style/content/conversation/message-list.less
+++ b/src/style/content/conversation/message-list.less
@@ -340,10 +340,22 @@
.md-heading {
margin: 4px 0 8px;
- font-size: var(--font-size-large);
+ font-size: var(--font-size-base);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-lg);
+ &--1 {
+ font-size: var(--font-size-xlarge);
+ }
+
+ &--2 {
+ font-size: var(--font-size-large);
+ }
+
+ &--3 {
+ font-size: var(--font-size-base);
+ }
+
& + br {
display: none;
}