This PR allows you to define `align="right"` for example to change the
default alignment on **HTML** table columns. This PR also refactors
where we store the alignments in order to make it so you can define it
column based instead of only row based.
See that the `Revenue` column is left aligned instead of the default
`centered`.
**Result**
<img width="1161" height="177" alt="Screenshot 2025-10-25 at 11 01 38"
src="https://github.com/user-attachments/assets/94bda4f0-00c1-4726-a3bd-99b3f2573ef5"
/>
**Code example**
```HTML
<table>
<tr>
<th rowspan="2">Region</th>
<th colspan="2" align="left">Revenue</th>
<th rowspan="2">Growth</th>
</tr>
<tr>
<th>Q2 2024</th>
<th>Q3 2024</th>
</tr>
<tr>
<td>North America</td>
<td>$2.8M</td>
<td>$2.4B</td>
<td>+85,614%</td>
</tr>
<tr>
<td>Europe</td>
<td>$1.2M</td>
<td>$1.9B</td>
<td>+158,233%</td>
</tr>
<tr>
<td>Asia-Pacific</td>
<td>$0.5M</td>
<td>$1.4B</td>
<td>+279,900%</td>
</tr>
</table>
```
Release Notes:
- markdown preview: Add support for `HTML` table column `align`
attribute
Closes https://github.com/zed-industries/zed/issues/39837
This PR adds support for `colspan` feature that is only supported for
HTML tables. I also fixed an edge case where the right side border was
not applied because it didn't match the total column count.
**Before**
<img width="725" height="179"
alt="499166907-385cc787-fc89-4e6d-bf06-c72c3c0bd775"
src="https://github.com/user-attachments/assets/69586053-9893-4c92-aa89-7830d2bc7a6d"
/>
**After**
<img width="1165" height="180" alt="Screenshot 2025-10-21 at 22 51 55"
src="https://github.com/user-attachments/assets/f40686e7-d95b-45a6-be42-e226e2f77483"
/>
```html
<table>
<tr>
<th rowspan="2">Region</th>
<th colspan="2">Revenue</th>
<th rowspan="2">Growth</th>
</tr>
<tr>
<th>Q2 2024</th>
<th>Q3 2024</th>
</tr>
<tr>
<td>North America</td>
<td>$2.8M</td>
<td>$2.4B</td>
<td>+85,614%</td>
</tr>
<tr>
<td>Europe</td>
<td>$1.2M</td>
<td>$1.9B</td>
<td>+158,233%</td>
</tr>
<tr>
<td>Asia-Pacific</td>
<td>$0.5M</td>
<td>$1.4B</td>
<td>+279,900%</td>
</tr>
</table>
```
**TODO**:
- [x] Add tests for rending logic
- [x] Test all the tables again
cc @bennetbo
Release Notes:
- Markdown: Added support for `colspan` and `rowspan` for HTML tables
---------
Co-authored-by: Zed AI <ai@zed.nl>
Co-authored-by: Anthony Eid <hello@anthonyeid.me>
Re-adds: https://github.com/zed-industries/zed/pull/37264
This PR re-adds basic support for showing HTML images, without touching
the display mode for images.
The initial PR changed the `div().flex().flex_col()` to
`h_flex().flex_wrap()` but this broke the text wrapping in almost all
cases.
**Note**: This does not add support for showing the images inline,
because we haven't figured out how they correctly do this.
I'm working on adding the CSS `inline` display feature support to taffy
that hopefully allows us to correctly show images/other elements inline
without breaking the text wrapping.
**Before (nightly) and after (dev) for the README file inside Zed.
(nothing has changed, which is good)**
<img width="3440" height="1380" alt="Screenshot 2025-09-13 at 12 49 08"
src="https://github.com/user-attachments/assets/9cbdcb07-dbe9-4236-9d20-e59acc0e955e"
/>
**Result**
<img width="1717" height="1314" alt="Screenshot 2025-09-13 at 12 51 54"
src="https://github.com/user-attachments/assets/1c0f8507-c63d-472e-8e82-a654a63f7153"
/>
cc @SomeoneToIgnore
Release Notes:
- markdown preview: Added support for HTML `img` tags inside paragraphs
Follow-up: #36700
This PR adds basic support for showing images inline inside a text.
As you can see inside the before screenshot, the image was displayed
right below the `Some inline text` text. This was because we didn't
consider the image to be inline with the text (paragraph). Now we do :)
All the test changes are making sure it is not more than 1 element
parsed, instead of only checking for the first parsed element. This
could work out bad when we return more than 1 result.
**Before**
<img width="1717" height="1344" alt="Screenshot 2025-08-31 at 13 49 45"
src="https://github.com/user-attachments/assets/13c5f9dd-0e0a-4e08-b2a6-28e9a4e0cab8"
/>
**After**
<img width="1719" height="1343" alt="Screenshot 2025-08-31 at 13 42 14"
src="https://github.com/user-attachments/assets/bf7aa82f-3743-4fb3-87aa-4a97a550c4d1"
/>
**Code example**:
```markdown
<p>some inline text <img src="https://picsum.photos/200/300" alt="Description of image" style="height: 100px" /> asdjkflsadjfl</p>
# Html Tag
<img src="https://picsum.photos/200/300" alt="Description of image" />
# Html Tag with width and height
<img src="https://picsum.photos/200/300" alt="Description of image" width="100" height="200" />
# Html Tag with style attribute with width and height
<img src="https://picsum.photos/200/300" alt="Description of image" style="width: 100px; height: 200px" />
# Normal Tag
```
Release Notes:
- Markdown: Added support for inline HTML `img` tags inside paragraphs
Closes#21534
While investigating the panic, I noticed that the code was pretty
complicated and decided to refactor parts of it to reduce redundancy.
Release Notes:
- Fixed an issue where the app could crash when opening the markdown
preview with a malformed image tag
Fixes a panic related to rendering checkboxes, see #10824.
Currently we are rendering a list into a single block, meaning the whole
block has to be rendered when it is visible on screen. This would lead
to performance problems when a single list block contained a lot of
items (especially if it contained checkboxes). This PR splits up list
items into separate blocks, meaning only the actual visible list items
on screen get rendered, instead of the whole list.
A nice side effect of the refactoring is, that you can actually click on
individual list items now:
https://github.com/zed-industries/zed/assets/53836821/5ef4200c-bd85-4e96-a8bf-e0c8b452f762
Release Notes:
- Improved rendering performance of list elements inside the markdown
preview
---------
Co-authored-by: Remco <djsmits12@gmail.com>
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.
Remco SmitsandBennet Bo Fenner
Bartosz Kaszubowski
Kirill Bulatov
Piotr Osiewicz
Bennet Bo Fenner
Bennet Bo FennerandRemco
Kieran Gill