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; }