markdown_preview: Improved markdown rendering support (#7345)

This PR improves support for rendering markdown documents.

## After the updates


https://github.com/zed-industries/zed/assets/18583882/48315901-563d-44c6-8265-8390e8eed942

## Before the updates


https://github.com/zed-industries/zed/assets/18583882/6d7ddb55-41f7-492e-af12-6ab54559f612

## New features

- @SomeoneToIgnore's [scrolling feature
request](https://github.com/zed-industries/zed/pull/6958#pullrequestreview-1850458632).
- Checkboxes (`- [ ]` and `- [x]`)
- Inline code blocks.
- Ordered and unordered lists at an arbitrary depth.
- Block quotes that render nested content, like code blocks.
- Lists that render nested content, like code blocks.
- Block quotes that support variable heading sizes and the other
markdown features added
[here](https://github.com/zed-industries/zed/pull/6958).
- Users can see and click internal links (`[See the docs](./docs.md)`).

## Notable changes

- Removed dependency on `rich_text`.
- Added a new method for parsing markdown into renderable structs. This
method uses recursive descent so it can easily support more complex
markdown documents.
- Parsing does not happen for every call to
`MarkdownPreviewView::render` anymore.

## TODO

- [ ] Typing should move the markdown preview cursor.

## Future work under consideration

- If a title exists for a link, show it on hover.
- Images. 
- Since this PR brings the most support for markdown, we can consolidate
`languages/markdown` and `rich_text` to use this new renderer. Note that
the updated inline text rendering method in this PR originated from
`langauges/markdown`.
- Syntax highlighting in code blocks.
- Footnote references.
- Inline HTML.
- Strikethrough support.
- Scrolling improvements:
- Handle automatic preview scrolling when multiple cursors are used in
the editor.
- > great to see that the render now respects editor's scrolls, but can
we also support the vice-versa (as syntax tree does it in Zed) — when
scrolling the render, it would be good to scroll the editor too
- > sometimes it's hard to understand where the "caret" on the render
is, so I wonder if we could go even further with its placement and place
it inside the text, as a regular caret? Maybe even support the
selections?
- > switching to another markdown tab does not change the rendered
contents and when I call the render command again, the screen gets
another split — I would rather prefer to have Zed's syntax tree
behavior: there's always a single panel that renders things for whatever
tab is active now. At least we should not split if there's already a
split, rather adding the new rendered tab there.
- > plaintext URLs could get a highlight and the click action

## Release Notes

- Improved support for markdown rendering.

Cargo.lock

@@ -4527,9 +4527,9 @@ dependencies = [
  "lazy_static",
  "log",
  "menu",
+ "pretty_assertions",
  "project",
  "pulldown-cmark",
- "rich_text",
  "theme",
  "ui",
  "util",

crates/markdown_preview/Cargo.toml

@@ -20,8 +20,8 @@ lazy_static.workspace = true
 log.workspace = true
 menu.workspace = true
 project.workspace = true
+pretty_assertions.workspace = true
 pulldown-cmark.workspace = true
-rich_text.workspace = true
 theme.workspace = true
 ui.workspace = true
 util.workspace = true

crates/markdown_preview/src/markdown_elements.rs

@@ -0,0 +1,242 @@
+use gpui::{px, FontStyle, FontWeight, HighlightStyle, SharedString, UnderlineStyle};
+use language::HighlightId;
+use std::{ops::Range, path::PathBuf};
+
+#[derive(Debug)]
+#[cfg_attr(test, derive(PartialEq))]
+pub enum ParsedMarkdownElement {
+    Heading(ParsedMarkdownHeading),
+    /// An ordered or unordered list of items.
+    List(ParsedMarkdownList),
+    Table(ParsedMarkdownTable),
+    BlockQuote(ParsedMarkdownBlockQuote),
+    CodeBlock(ParsedMarkdownCodeBlock),
+    /// A paragraph of text and other inline elements.
+    Paragraph(ParsedMarkdownText),
+    HorizontalRule(Range<usize>),
+}
+
+impl ParsedMarkdownElement {
+    pub fn source_range(&self) -> Range<usize> {
+        match self {
+            Self::Heading(heading) => heading.source_range.clone(),
+            Self::List(list) => list.source_range.clone(),
+            Self::Table(table) => table.source_range.clone(),
+            Self::BlockQuote(block_quote) => block_quote.source_range.clone(),
+            Self::CodeBlock(code_block) => code_block.source_range.clone(),
+            Self::Paragraph(text) => text.source_range.clone(),
+            Self::HorizontalRule(range) => range.clone(),
+        }
+    }
+}
+
+#[derive(Debug)]
+#[cfg_attr(test, derive(PartialEq))]
+pub struct ParsedMarkdown {
+    pub children: Vec<ParsedMarkdownElement>,
+}
+
+#[derive(Debug)]
+#[cfg_attr(test, derive(PartialEq))]
+pub struct ParsedMarkdownList {
+    pub source_range: Range<usize>,
+    pub children: Vec<ParsedMarkdownListItem>,
+}
+
+#[derive(Debug)]
+#[cfg_attr(test, derive(PartialEq))]
+pub struct ParsedMarkdownListItem {
+    /// How many indentations deep this item is.
+    pub depth: u16,
+    pub item_type: ParsedMarkdownListItemType,
+    pub contents: Vec<Box<ParsedMarkdownElement>>,
+}
+
+#[derive(Debug)]
+#[cfg_attr(test, derive(PartialEq))]
+pub enum ParsedMarkdownListItemType {
+    Ordered(u64),
+    Task(bool),
+    Unordered,
+}
+
+#[derive(Debug)]
+#[cfg_attr(test, derive(PartialEq))]
+pub struct ParsedMarkdownCodeBlock {
+    pub source_range: Range<usize>,
+    pub language: Option<String>,
+    pub contents: SharedString,
+}
+
+#[derive(Debug)]
+#[cfg_attr(test, derive(PartialEq))]
+pub struct ParsedMarkdownHeading {
+    pub source_range: Range<usize>,
+    pub level: HeadingLevel,
+    pub contents: ParsedMarkdownText,
+}
+
+#[derive(Debug, PartialEq)]
+pub enum HeadingLevel {
+    H1,
+    H2,
+    H3,
+    H4,
+    H5,
+    H6,
+}
+
+#[derive(Debug)]
+pub struct ParsedMarkdownTable {
+    pub source_range: Range<usize>,
+    pub header: ParsedMarkdownTableRow,
+    pub body: Vec<ParsedMarkdownTableRow>,
+    pub column_alignments: Vec<ParsedMarkdownTableAlignment>,
+}
+
+#[derive(Debug, Clone, Copy)]
+#[cfg_attr(test, derive(PartialEq))]
+pub enum ParsedMarkdownTableAlignment {
+    /// Default text alignment.
+    None,
+    Left,
+    Center,
+    Right,
+}
+
+#[derive(Debug)]
+#[cfg_attr(test, derive(PartialEq))]
+pub struct ParsedMarkdownTableRow {
+    pub children: Vec<ParsedMarkdownText>,
+}
+
+impl ParsedMarkdownTableRow {
+    pub fn new() -> Self {
+        Self {
+            children: Vec::new(),
+        }
+    }
+
+    pub fn with_children(children: Vec<ParsedMarkdownText>) -> Self {
+        Self { children }
+    }
+}
+
+#[derive(Debug)]
+#[cfg_attr(test, derive(PartialEq))]
+pub struct ParsedMarkdownBlockQuote {
+    pub source_range: Range<usize>,
+    pub children: Vec<Box<ParsedMarkdownElement>>,
+}
+
+#[derive(Debug)]
+pub struct ParsedMarkdownText {
+    /// Where the text is located in the source Markdown document.
+    pub source_range: Range<usize>,
+    /// The text content stripped of any formatting symbols.
+    pub contents: String,
+    /// The list of highlights contained in the Markdown document.
+    pub highlights: Vec<(Range<usize>, MarkdownHighlight)>,
+    /// The regions of the various ranges in the Markdown document.
+    pub region_ranges: Vec<Range<usize>>,
+    /// The regions of the Markdown document.
+    pub regions: Vec<ParsedRegion>,
+}
+
+/// A run of highlighted Markdown text.
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub enum MarkdownHighlight {
+    /// A styled Markdown highlight.
+    Style(MarkdownHighlightStyle),
+    /// A highlighted code block.
+    Code(HighlightId),
+}
+
+impl MarkdownHighlight {
+    /// Converts this [`MarkdownHighlight`] to a [`HighlightStyle`].
+    pub fn to_highlight_style(&self, theme: &theme::SyntaxTheme) -> Option<HighlightStyle> {
+        match self {
+            MarkdownHighlight::Style(style) => {
+                let mut highlight = HighlightStyle::default();
+
+                if style.italic {
+                    highlight.font_style = Some(FontStyle::Italic);
+                }
+
+                if style.underline {
+                    highlight.underline = Some(UnderlineStyle {
+                        thickness: px(1.),
+                        ..Default::default()
+                    });
+                }
+
+                if style.weight != FontWeight::default() {
+                    highlight.font_weight = Some(style.weight);
+                }
+
+                Some(highlight)
+            }
+
+            MarkdownHighlight::Code(id) => id.style(theme),
+        }
+    }
+}
+
+/// The style for a Markdown highlight.
+#[derive(Debug, Clone, Default, PartialEq, Eq)]
+pub struct MarkdownHighlightStyle {
+    /// Whether the text should be italicized.
+    pub italic: bool,
+    /// Whether the text should be underlined.
+    pub underline: bool,
+    /// The weight of the text.
+    pub weight: FontWeight,
+}
+
+/// A parsed region in a Markdown document.
+#[derive(Debug, Clone)]
+#[cfg_attr(test, derive(PartialEq))]
+pub struct ParsedRegion {
+    /// Whether the region is a code block.
+    pub code: bool,
+    /// The link contained in this region, if it has one.
+    pub link: Option<Link>,
+}
+
+/// A Markdown link.
+#[derive(Debug, Clone)]
+#[cfg_attr(test, derive(PartialEq))]
+pub enum Link {
+    /// A link to a webpage.
+    Web {
+        /// The URL of the webpage.
+        url: String,
+    },
+    /// A link to a path on the filesystem.
+    Path {
+        /// The path to the item.
+        path: PathBuf,
+    },
+}
+
+impl Link {
+    pub fn identify(file_location_directory: Option<PathBuf>, text: String) -> Option<Link> {
+        if text.starts_with("http") {
+            return Some(Link::Web { url: text });
+        }
+
+        let path = PathBuf::from(&text);
+        if path.is_absolute() && path.exists() {
+            return Some(Link::Path { path });
+        }
+
+        if let Some(file_location_directory) = file_location_directory {
+            let path = file_location_directory.join(text);
+            if path.exists() {
+                return Some(Link::Path { path });
+            }
+        }
+
+        None
+    }
+}

crates/markdown_preview/src/markdown_preview.rs

@@ -1,6 +1,8 @@
 use gpui::{actions, AppContext};
 use workspace::Workspace;
 
+pub mod markdown_elements;
+pub mod markdown_parser;
 pub mod markdown_preview_view;
 pub mod markdown_renderer;
 

crates/markdown_preview/src/markdown_preview_view.rs

@@ -1,35 +1,41 @@
+use std::{ops::Range, path::PathBuf};
+
 use editor::{Editor, EditorEvent};
 use gpui::{
-    canvas, AnyElement, AppContext, AvailableSpace, EventEmitter, FocusHandle, FocusableView,
+    list, AnyElement, AppContext, EventEmitter, FocusHandle, FocusableView, InteractiveElement,
-    InteractiveElement, IntoElement, ParentElement, Render, Styled, View, ViewContext,
+    IntoElement, ListState, ParentElement, Render, Styled, View, ViewContext, WeakView,
 };
-use language::LanguageRegistry;
-use std::sync::Arc;
 use ui::prelude::*;
 use workspace::item::Item;
 use workspace::Workspace;
 
-use crate::{markdown_renderer::render_markdown, OpenPreview};
+use crate::{
+    markdown_elements::ParsedMarkdown,
+    markdown_parser::parse_markdown,
+    markdown_renderer::{render_markdown_block, RenderContext},
+    OpenPreview,
+};
 
 pub struct MarkdownPreviewView {
+    workspace: WeakView<Workspace>,
     focus_handle: FocusHandle,
-    languages: Arc<LanguageRegistry>,
+    contents: ParsedMarkdown,
-    contents: String,
+    selected_block: usize,
+    list_state: ListState,
 }
 
 impl MarkdownPreviewView {
     pub fn register(workspace: &mut Workspace, _cx: &mut ViewContext<Workspace>) {
-        let languages = workspace.app_state().languages.clone();
-
         workspace.register_action(move |workspace, _: &OpenPreview, cx| {
             if workspace.has_active_modal(cx) {
                 cx.propagate();
                 return;
             }
-            let languages = languages.clone();
+
             if let Some(editor) = workspace.active_item_as::<Editor>(cx) {
+                let workspace_handle = workspace.weak_handle();
                 let view: View<MarkdownPreviewView> =
-                    cx.new_view(|cx| MarkdownPreviewView::new(editor, languages, cx));
+                    MarkdownPreviewView::new(editor, workspace_handle, cx);
                 workspace.split_item(workspace::SplitDirection::Right, Box::new(view.clone()), cx);
                 cx.notify();
             }
@@ -38,29 +44,120 @@ impl MarkdownPreviewView {
 
     pub fn new(
         active_editor: View<Editor>,
-        languages: Arc<LanguageRegistry>,
+        workspace: WeakView<Workspace>,
-        cx: &mut ViewContext<Self>,
+        cx: &mut ViewContext<Workspace>,
-    ) -> Self {
+    ) -> View<Self> {
-        let focus_handle = cx.focus_handle();
+        cx.new_view(|cx: &mut ViewContext<Self>| {
+            let view = cx.view().downgrade();
+            let editor = active_editor.read(cx);
+
+            let file_location = MarkdownPreviewView::get_folder_for_active_editor(editor, cx);
+            let contents = editor.buffer().read(cx).snapshot(cx).text();
+            let contents = parse_markdown(&contents, file_location);
 
             cx.subscribe(&active_editor, |this, editor, event: &EditorEvent, cx| {
-            if *event == EditorEvent::Edited {
+                match event {
+                    EditorEvent::Edited => {
                         let editor = editor.read(cx);
                         let contents = editor.buffer().read(cx).snapshot(cx).text();
-                this.contents = contents;
+                        let file_location =
+                            MarkdownPreviewView::get_folder_for_active_editor(editor, cx);
+                        this.contents = parse_markdown(&contents, file_location);
+                        this.list_state.reset(this.contents.children.len());
+                        cx.notify();
+
+                        // TODO: This does not work as expected.
+                        // The scroll request appears to be dropped
+                        // after `.reset` is called.
+                        this.list_state.scroll_to_reveal_item(this.selected_block);
                         cx.notify();
                     }
+                    EditorEvent::SelectionsChanged { .. } => {
+                        let editor = editor.read(cx);
+                        let selection_range = editor.selections.last::<usize>(cx).range();
+                        this.selected_block = this.get_block_index_under_cursor(selection_range);
+                        this.list_state.scroll_to_reveal_item(this.selected_block);
+                        cx.notify();
+                    }
+                    _ => {}
+                };
             })
             .detach();
 
-        let editor = active_editor.read(cx);
+            let list_state = ListState::new(
-        let contents = editor.buffer().read(cx).snapshot(cx).text();
+                contents.children.len(),
+                gpui::ListAlignment::Top,
+                px(1000.),
+                move |ix, cx| {
+                    if let Some(view) = view.upgrade() {
+                        view.update(cx, |view, cx| {
+                            let mut render_cx =
+                                RenderContext::new(Some(view.workspace.clone()), cx);
+                            let block = view.contents.children.get(ix).unwrap();
+                            let block = render_markdown_block(block, &mut render_cx);
+                            let block = div().child(block).pl_4().pb_3();
+
+                            if ix == view.selected_block {
+                                let indicator = div()
+                                    .h_full()
+                                    .w(px(4.0))
+                                    .bg(cx.theme().colors().border)
+                                    .rounded_sm();
+
+                                return div()
+                                    .relative()
+                                    .child(block)
+                                    .child(indicator.absolute().left_0().top_0())
+                                    .into_any();
+                            }
+
+                            block.into_any()
+                        })
+                    } else {
+                        div().into_any()
+                    }
+                },
+            );
 
             Self {
-            focus_handle,
+                selected_block: 0,
-            languages,
+                focus_handle: cx.focus_handle(),
+                workspace,
                 contents,
+                list_state,
             }
+        })
+    }
+
+    /// The absolute path of the file that is currently being previewed.
+    fn get_folder_for_active_editor(
+        editor: &Editor,
+        cx: &ViewContext<MarkdownPreviewView>,
+    ) -> Option<PathBuf> {
+        if let Some(file) = editor.file_at(0, cx) {
+            if let Some(file) = file.as_local() {
+                file.abs_path(cx).parent().map(|p| p.to_path_buf())
+            } else {
+                None
+            }
+        } else {
+            None
+        }
+    }
+
+    fn get_block_index_under_cursor(&self, selection_range: Range<usize>) -> usize {
+        let mut block_index = 0;
+        let cursor = selection_range.start;
+
+        for (i, block) in self.contents.children.iter().enumerate() {
+            let Range { start, end } = block.source_range();
+            if start <= cursor && end >= cursor {
+                block_index = i;
+                break;
+            }
+        }
+
+        return block_index;
     }
 }
 
@@ -108,30 +205,17 @@ impl Item for MarkdownPreviewView {
 
 impl Render for MarkdownPreviewView {
     fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
-        let rendered_markdown = v_flex()
+        v_flex()
-            .items_start()
+            .id("MarkdownPreview")
-            .justify_start()
             .key_context("MarkdownPreview")
             .track_focus(&self.focus_handle)
-            .id("MarkdownPreview")
+            .full()
-            .overflow_y_scroll()
-            .overflow_x_hidden()
-            .size_full()
             .bg(cx.theme().colors().editor_background)
             .p_4()
-            .children(render_markdown(&self.contents, &self.languages, cx));
+            .child(
-
+                div()
-        div().flex_1().child(
+                    .flex_grow()
-            // FIXME: This shouldn't be necessary
+                    .map(|this| this.child(list(self.list_state.clone()).full())),
-            // but the overflow_scroll above doesn't seem to work without it
-            canvas(move |bounds, cx| {
-                rendered_markdown.into_any().draw(
-                    bounds.origin,
-                    bounds.size.map(AvailableSpace::Definite),
-                    cx,
-                )
-            })
-            .size_full(),
             )
     }
 }

crates/markdown_preview/src/markdown_renderer.rs

@@ -1,305 +1,107 @@
-use std::{ops::Range, sync::Arc};
+use crate::markdown_elements::{
-
+    HeadingLevel, Link, ParsedMarkdown, ParsedMarkdownBlockQuote, ParsedMarkdownCodeBlock,
+    ParsedMarkdownElement, ParsedMarkdownHeading, ParsedMarkdownList, ParsedMarkdownListItemType,
+    ParsedMarkdownTable, ParsedMarkdownTableAlignment, ParsedMarkdownTableRow, ParsedMarkdownText,
+};
 use gpui::{
-    div, px, rems, AnyElement, DefiniteLength, Div, ElementId, Hsla, ParentElement, SharedString,
+    div, px, rems, AbsoluteLength, AnyElement, DefiniteLength, Div, Element, ElementId,
-    Styled, StyledText, WindowContext,
+    HighlightStyle, Hsla, InteractiveText, IntoElement, ParentElement, SharedString, Styled,
+    StyledText, TextStyle, WeakView, WindowContext,
 };
-use language::LanguageRegistry;
+use std::{ops::Range, sync::Arc};
-use pulldown_cmark::{Alignment, CodeBlockKind, Event, HeadingLevel, Options, Parser, Tag};
+use theme::{ActiveTheme, SyntaxTheme};
-use rich_text::render_rich_text;
+use ui::{h_flex, v_flex, Label};
-use theme::{ActiveTheme, Theme};
+use workspace::Workspace;
-use ui::{h_flex, v_flex};
 
-enum TableState {
+pub struct RenderContext {
-    Header,
+    workspace: Option<WeakView<Workspace>>,
-    Body,
+    next_id: usize,
-}
+    text_style: TextStyle,
-
-struct MarkdownTable {
-    column_alignments: Vec<Alignment>,
-    header: Vec<Div>,
-    body: Vec<Vec<Div>>,
-    current_row: Vec<Div>,
-    state: TableState,
     border_color: Hsla,
+    text_color: Hsla,
+    text_muted_color: Hsla,
+    code_block_background_color: Hsla,
+    code_span_background_color: Hsla,
+    syntax_theme: Arc<SyntaxTheme>,
+    indent: usize,
 }
 
-impl MarkdownTable {
+impl RenderContext {
-    fn new(border_color: Hsla, column_alignments: Vec<Alignment>) -> Self {
+    pub fn new(workspace: Option<WeakView<Workspace>>, cx: &WindowContext) -> RenderContext {
-        Self {
+        let theme = cx.theme().clone();
-            column_alignments,
+
-            header: Vec::new(),
+        RenderContext {
-            body: Vec::new(),
+            workspace,
-            current_row: Vec::new(),
+            next_id: 0,
-            state: TableState::Header,
+            indent: 0,
-            border_color,
+            text_style: cx.text_style(),
+            syntax_theme: theme.syntax().clone(),
+            border_color: theme.colors().border,
+            text_color: theme.colors().text,
+            text_muted_color: theme.colors().text_muted,
+            code_block_background_color: theme.colors().surface_background,
+            code_span_background_color: theme.colors().editor_document_highlight_read_background,
         }
     }
 
-    fn finish_row(&mut self) {
+    fn next_id(&mut self, span: &Range<usize>) -> ElementId {
-        match self.state {
+        let id = format!("markdown-{}-{}-{}", self.next_id, span.start, span.end);
-            TableState::Header => {
+        self.next_id += 1;
-                self.header.extend(self.current_row.drain(..));
+        ElementId::from(SharedString::from(id))
-                self.state = TableState::Body;
     }
-            TableState::Body => {
+
-                self.body.push(self.current_row.drain(..).collect());
+    /// This ensures that children inside of block quotes
+    /// have padding between them.
+    ///
+    /// For example, for this markdown:
+    ///
+    /// ```markdown
+    /// > This is a block quote.
+    /// >
+    /// > And this is the next paragraph.
+    /// ```
+    ///
+    /// We give padding between "This is a block quote."
+    /// and "And this is the next paragraph."
+    fn with_common_p(&self, element: Div) -> Div {
+        if self.indent > 0 {
+            element.pb_3()
+        } else {
+            element
         }
     }
 }
 
-    fn add_cell(&mut self, contents: AnyElement) {
+pub fn render_parsed_markdown(
-        let container = match self.alignment_for_next_cell() {
+    parsed: &ParsedMarkdown,
-            Alignment::Left | Alignment::None => div(),
+    workspace: Option<WeakView<Workspace>>,
-            Alignment::Center => v_flex().items_center(),
-            Alignment::Right => v_flex().items_end(),
-        };
-
-        let cell = container
-            .w_full()
-            .child(contents)
-            .px_2()
-            .py_1()
-            .border_color(self.border_color);
-
-        let cell = match self.state {
-            TableState::Header => cell.border_2(),
-            TableState::Body => cell.border_1(),
-        };
-
-        self.current_row.push(cell);
-    }
-
-    fn finish(self) -> Div {
-        let mut table = v_flex().w_full();
-        let mut header = h_flex();
-
-        for cell in self.header {
-            header = header.child(cell);
-        }
-        table = table.child(header);
-        for row in self.body {
-            let mut row_div = h_flex();
-            for cell in row {
-                row_div = row_div.child(cell);
-            }
-            table = table.child(row_div);
-        }
-        table
-    }
-
-    fn alignment_for_next_cell(&self) -> Alignment {
-        self.column_alignments
-            .get(self.current_row.len())
-            .copied()
-            .unwrap_or(Alignment::None)
-    }
-}
-
-struct Renderer<I> {
-    source_contents: String,
-    iter: I,
-    theme: Arc<Theme>,
-    finished: Vec<Div>,
-    language_registry: Arc<LanguageRegistry>,
-    table: Option<MarkdownTable>,
-    list_depth: usize,
-    block_quote_depth: usize,
-}
-
-impl<'a, I> Renderer<I>
-where
-    I: Iterator<Item = (Event<'a>, Range<usize>)>,
-{
-    fn new(
-        iter: I,
-        source_contents: String,
-        language_registry: &Arc<LanguageRegistry>,
-        theme: Arc<Theme>,
-    ) -> Self {
-        Self {
-            iter,
-            source_contents,
-            theme,
-            table: None,
-            finished: vec![],
-            language_registry: language_registry.clone(),
-            list_depth: 0,
-            block_quote_depth: 0,
-        }
-    }
-
-    fn run(mut self, cx: &WindowContext) -> Self {
-        while let Some((event, source_range)) = self.iter.next() {
-            match event {
-                Event::Start(tag) => {
-                    self.start_tag(tag);
-                }
-                Event::End(tag) => {
-                    self.end_tag(tag, source_range, cx);
-                }
-                Event::Rule => {
-                    let rule = div().w_full().h(px(2.)).bg(self.theme.colors().border);
-                    self.finished.push(div().mb_4().child(rule));
-                }
-                _ => {}
-            }
-        }
-        self
-    }
-
-    fn start_tag(&mut self, tag: Tag<'a>) {
-        match tag {
-            Tag::List(_) => {
-                self.list_depth += 1;
-            }
-            Tag::BlockQuote => {
-                self.block_quote_depth += 1;
-            }
-            Tag::Table(column_alignments) => {
-                self.table = Some(MarkdownTable::new(
-                    self.theme.colors().border,
-                    column_alignments,
-                ));
-            }
-            _ => {}
-        }
-    }
-
-    fn end_tag(&mut self, tag: Tag, source_range: Range<usize>, cx: &WindowContext) {
-        match tag {
-            Tag::Paragraph => {
-                if self.list_depth > 0 || self.block_quote_depth > 0 {
-                    return;
-                }
-
-                let element = self.render_md_from_range(source_range.clone(), cx);
-                let paragraph = div().mb_3().child(element);
-
-                self.finished.push(paragraph);
-            }
-            Tag::Heading(level, _, _) => {
-                let mut headline = self.headline(level);
-                if source_range.start > 0 {
-                    headline = headline.mt_4();
-                }
-
-                let element = self.render_md_from_range(source_range.clone(), cx);
-                let headline = headline.child(element);
-
-                self.finished.push(headline);
-            }
-            Tag::List(_) => {
-                if self.list_depth == 1 {
-                    let element = self.render_md_from_range(source_range.clone(), cx);
-                    let list = div().mb_3().child(element);
-
-                    self.finished.push(list);
-                }
-
-                self.list_depth -= 1;
-            }
-            Tag::BlockQuote => {
-                let element = self.render_md_from_range(source_range.clone(), cx);
-
-                let block_quote = h_flex()
-                    .mb_3()
-                    .child(
-                        div()
-                            .w(px(4.))
-                            .bg(self.theme.colors().border)
-                            .h_full()
-                            .mr_2()
-                            .mt_1(),
-                    )
-                    .text_color(self.theme.colors().text_muted)
-                    .child(element);
-
-                self.finished.push(block_quote);
-
-                self.block_quote_depth -= 1;
-            }
-            Tag::CodeBlock(kind) => {
-                let contents = self.source_contents[source_range.clone()].trim();
-                let contents = contents.trim_start_matches("```");
-                let contents = contents.trim_end_matches("```");
-                let contents = match kind {
-                    CodeBlockKind::Fenced(language) => {
-                        contents.trim_start_matches(&language.to_string())
-                    }
-                    CodeBlockKind::Indented => contents,
-                };
-                let contents: String = contents.into();
-                let contents = SharedString::from(contents);
-
-                let code_block = div()
-                    .mb_3()
-                    .px_4()
-                    .py_0()
-                    .bg(self.theme.colors().surface_background)
-                    .child(StyledText::new(contents));
-
-                self.finished.push(code_block);
-            }
-            Tag::Table(_alignment) => {
-                if self.table.is_none() {
-                    log::error!("Table end without table ({:?})", source_range);
-                    return;
-                }
-
-                let table = self.table.take().unwrap();
-                let table = table.finish().mb_4();
-                self.finished.push(table);
-            }
-            Tag::TableHead => {
-                if self.table.is_none() {
-                    log::error!("Table head without table ({:?})", source_range);
-                    return;
-                }
-
-                self.table.as_mut().unwrap().finish_row();
-            }
-            Tag::TableRow => {
-                if self.table.is_none() {
-                    log::error!("Table row without table ({:?})", source_range);
-                    return;
-                }
-
-                self.table.as_mut().unwrap().finish_row();
-            }
-            Tag::TableCell => {
-                if self.table.is_none() {
-                    log::error!("Table cell without table ({:?})", source_range);
-                    return;
-                }
-
-                let contents = self.render_md_from_range(source_range.clone(), cx);
-                self.table.as_mut().unwrap().add_cell(contents);
-            }
-            _ => {}
-        }
-    }
-
-    fn render_md_from_range(
-        &self,
-        source_range: Range<usize>,
     cx: &WindowContext,
-    ) -> gpui::AnyElement {
+) -> Vec<AnyElement> {
-        let mentions = &[];
+    let mut cx = RenderContext::new(workspace, cx);
-        let language = None;
+    let mut elements = Vec::new();
-        let paragraph = &self.source_contents[source_range.clone()];
+
-        let rich_text = render_rich_text(
+    for child in &parsed.children {
-            paragraph.into(),
+        elements.push(render_markdown_block(child, &mut cx));
-            mentions,
-            &self.language_registry,
-            language,
-        );
-        let id: ElementId = source_range.start.into();
-        rich_text.element(id, cx)
     }
 
-    fn headline(&self, level: HeadingLevel) -> Div {
+    return elements;
-        let size = match level {
+}
+
+pub fn render_markdown_block(block: &ParsedMarkdownElement, cx: &mut RenderContext) -> AnyElement {
+    use ParsedMarkdownElement::*;
+    match block {
+        Paragraph(text) => render_markdown_paragraph(text, cx),
+        Heading(heading) => render_markdown_heading(heading, cx),
+        List(list) => render_markdown_list(list, cx),
+        Table(table) => render_markdown_table(table, cx),
+        BlockQuote(block_quote) => render_markdown_block_quote(block_quote, cx),
+        CodeBlock(code_block) => render_markdown_code_block(code_block, cx),
+        HorizontalRule(_) => render_markdown_rule(cx),
+    }
+}
+
+fn render_markdown_heading(parsed: &ParsedMarkdownHeading, cx: &mut RenderContext) -> AnyElement {
+    let size = match parsed.level {
         HeadingLevel::H1 => rems(2.),
         HeadingLevel::H2 => rems(1.5),
         HeadingLevel::H3 => rems(1.25),
@@ -308,39 +110,213 @@ where
         HeadingLevel::H6 => rems(0.85),
     };
 
-        let color = match level {
+    let color = match parsed.level {
-            HeadingLevel::H6 => self.theme.colors().text_muted,
+        HeadingLevel::H6 => cx.text_muted_color,
-            _ => self.theme.colors().text,
+        _ => cx.text_color,
     };
 
     let line_height = DefiniteLength::from(rems(1.25));
 
-        let headline = h_flex()
+    div()
-            .w_full()
         .line_height(line_height)
         .text_size(size)
         .text_color(color)
-            .mb_4()
+        .pt(rems(0.15))
-            .pb(rems(0.15));
+        .pb_1()
-
+        .child(render_markdown_text(&parsed.contents, cx))
-        headline
+        .into_any()
-    }
 }
 
-pub fn render_markdown(
+fn render_markdown_list(parsed: &ParsedMarkdownList, cx: &mut RenderContext) -> AnyElement {
-    markdown_input: &str,
+    use ParsedMarkdownListItemType::*;
-    language_registry: &Arc<LanguageRegistry>,
+
-    cx: &WindowContext,
+    let mut items = vec![];
-) -> Vec<Div> {
+    for item in &parsed.children {
-    let theme = cx.theme().clone();
+        let padding = rems((item.depth - 1) as f32 * 0.25);
-    let options = Options::all();
+
-    let parser = Parser::new_ext(markdown_input, options);
+        let bullet = match item.item_type {
-    let renderer = Renderer::new(
+            Ordered(order) => format!("{}.", order),
-        parser.into_offset_iter(),
+            Unordered => "•".to_string(),
-        markdown_input.to_owned(),
+            Task(checked) => if checked { "☑" } else { "☐" }.to_string(),
-        language_registry,
+        };
-        theme,
+        let bullet = div().mr_2().child(Label::new(bullet));
+
+        let contents: Vec<AnyElement> = item
+            .contents
+            .iter()
+            .map(|c| render_markdown_block(c.as_ref(), cx))
+            .collect();
+
+        let item = h_flex()
+            .pl(DefiniteLength::Absolute(AbsoluteLength::Rems(padding)))
+            .items_start()
+            .children(vec![bullet, div().children(contents).pr_2().w_full()]);
+
+        items.push(item);
+    }
+
+    cx.with_common_p(div()).children(items).into_any()
+}
+
+fn render_markdown_table(parsed: &ParsedMarkdownTable, cx: &mut RenderContext) -> AnyElement {
+    let header = render_markdown_table_row(&parsed.header, &parsed.column_alignments, true, cx);
+
+    let body: Vec<AnyElement> = parsed
+        .body
+        .iter()
+        .map(|row| render_markdown_table_row(row, &parsed.column_alignments, false, cx))
+        .collect();
+
+    cx.with_common_p(v_flex())
+        .w_full()
+        .child(header)
+        .children(body)
+        .into_any()
+}
+
+fn render_markdown_table_row(
+    parsed: &ParsedMarkdownTableRow,
+    alignments: &Vec<ParsedMarkdownTableAlignment>,
+    is_header: bool,
+    cx: &mut RenderContext,
+) -> AnyElement {
+    let mut items = vec![];
+
+    for cell in &parsed.children {
+        let alignment = alignments
+            .get(items.len())
+            .copied()
+            .unwrap_or(ParsedMarkdownTableAlignment::None);
+
+        let contents = render_markdown_text(cell, cx);
+
+        let container = match alignment {
+            ParsedMarkdownTableAlignment::Left | ParsedMarkdownTableAlignment::None => div(),
+            ParsedMarkdownTableAlignment::Center => v_flex().items_center(),
+            ParsedMarkdownTableAlignment::Right => v_flex().items_end(),
+        };
+
+        let mut cell = container
+            .w_full()
+            .child(contents)
+            .px_2()
+            .py_1()
+            .border_color(cx.border_color);
+
+        if is_header {
+            cell = cell.border_2()
+        } else {
+            cell = cell.border_1()
+        }
+
+        items.push(cell);
+    }
+
+    h_flex().children(items).into_any_element()
+}
+
+fn render_markdown_block_quote(
+    parsed: &ParsedMarkdownBlockQuote,
+    cx: &mut RenderContext,
+) -> AnyElement {
+    cx.indent += 1;
+
+    let children: Vec<AnyElement> = parsed
+        .children
+        .iter()
+        .map(|child| render_markdown_block(child, cx))
+        .collect();
+
+    cx.indent -= 1;
+
+    cx.with_common_p(div())
+        .child(
+            div()
+                .border_l_4()
+                .border_color(cx.border_color)
+                .pl_3()
+                .children(children),
+        )
+        .into_any()
+}
+
+fn render_markdown_code_block(
+    parsed: &ParsedMarkdownCodeBlock,
+    cx: &mut RenderContext,
+) -> AnyElement {
+    cx.with_common_p(div())
+        .px_3()
+        .py_3()
+        .bg(cx.code_block_background_color)
+        .child(StyledText::new(parsed.contents.clone()))
+        .into_any()
+}
+
+fn render_markdown_paragraph(parsed: &ParsedMarkdownText, cx: &mut RenderContext) -> AnyElement {
+    cx.with_common_p(div())
+        .child(render_markdown_text(parsed, cx))
+        .into_any_element()
+}
+
+fn render_markdown_text(parsed: &ParsedMarkdownText, cx: &mut RenderContext) -> AnyElement {
+    let element_id = cx.next_id(&parsed.source_range);
+
+    let highlights = gpui::combine_highlights(
+        parsed.highlights.iter().filter_map(|(range, highlight)| {
+            let highlight = highlight.to_highlight_style(&cx.syntax_theme)?;
+            Some((range.clone(), highlight))
+        }),
+        parsed
+            .regions
+            .iter()
+            .zip(&parsed.region_ranges)
+            .filter_map(|(region, range)| {
+                if region.code {
+                    Some((
+                        range.clone(),
+                        HighlightStyle {
+                            background_color: Some(cx.code_span_background_color),
+                            ..Default::default()
+                        },
+                    ))
+                } else {
+                    None
+                }
+            }),
     );
-    let renderer = renderer.run(cx);
+
-    return renderer.finished;
+    let mut links = Vec::new();
+    let mut link_ranges = Vec::new();
+    for (range, region) in parsed.region_ranges.iter().zip(&parsed.regions) {
+        if let Some(link) = region.link.clone() {
+            links.push(link);
+            link_ranges.push(range.clone());
+        }
+    }
+
+    let workspace = cx.workspace.clone();
+
+    InteractiveText::new(
+        element_id,
+        StyledText::new(parsed.contents.clone()).with_highlights(&cx.text_style, highlights),
+    )
+    .on_click(
+        link_ranges,
+        move |clicked_range_ix, window_cx| match &links[clicked_range_ix] {
+            Link::Web { url } => window_cx.open_url(url),
+            Link::Path { path } => {
+                if let Some(workspace) = &workspace {
+                    _ = workspace.update(window_cx, |workspace, cx| {
+                        workspace.open_abs_path(path.clone(), false, cx).detach();
+                    });
+                }
+            }
+        },
+    )
+    .into_any_element()
+}
+
+fn render_markdown_rule(cx: &mut RenderContext) -> AnyElement {
+    let rule = div().w_full().h(px(2.)).bg(cx.border_color);
+    div().pt_3().pb_3().child(rule).into_any()
 }