✨ Markdown Preview

[jenslys]

Describe the solution you'd like

Would be nice to have a feature where you can preview your markdown(.md) files within CodeEdit. Preferably matching GitHub's styling. Where you also could switch between dark and light mode.

Example preview from VS CODE:

https://cln.sh/MzuGHDycazmyxGssnWqp

Resources

• https://github.com/JohnSundell/Ink
• https://github.com/SwiftDevJournal/SwiftUIMarkdownEditor
• https://github.com/mjbvz/vscode-github-markdown-preview-style

[ghost]

@jenslys So you mean raw and formatted text? Supporting HTML and Markdown? I can work on something like that. Unfortunately, there are only messy, complicated ways to do this using the SwiftUI WebView, so we might have to add a bit of JavaScript rooted into SwiftUI.

[leon-wolf]

I you like you can assign me to this issue and i would take a look :)

[austincondiff]

@leon-wolf, I've assigned it to you, but we may consider the following before starting this task:

1. Should this be an extension (it would still ship with CodeEdit)

• If yes: can we work on it now in the core and move it into an extension later or should we wait until we have a more solidified Extensions API?

2. Should the preview be in the same tab or a separate tab?

• If same tab: should it split the layout within the tab aside from planned editor split layouts?
• If separate: should we open a split editor if one does not yet exist with the tab open?

Note: Xcode has the concept of the preview canvas within the same tab, so for whatever thats worth.

3. Should the preview be open by default?

4. For .md files only, .mdx?

5. Command, menu item, keyboard shortcut to show/hide preview?

6. Because markdown outputs html, would it be appropriate to render the preview in a webview or do we want to try to parse it as a native view?

7. Do we want to handle markdown flavors?

CC: @CodeEditApp/maintainers

[austincondiff]

Here is a potential resource mentioned in Discord

• gonzalezreal/MarkdownUI

[StefKors]

btw Swift UI supports markdown natively like so:

struct Markdown: View {

  var body: some View {
    VStack {
      Text(.init("**Hello** *World*"))
    }
  }

}

For finetuned control of rendering output you can read here how that works: https://developer.apple.com/documentation/swiftui/text/init(_:)-1a4oh

An alternative library can be found here: https://github.com/apple/swift-markdown

[0xWDG]

btw Swift UI supports markdown natively like so:

struct Markdown: View {

  var body: some View {
    VStack {
      Text(.init("**Hello** *World*"))
    }
  }

}

For finetuned control of rendering output you can read here how that works: developer.apple.com/documentation/swiftui/text/init(_:)-1a4oh

An alternative library can be found here: apple/swift-markdown

Yup, but it does not support images, so it is no direct replacement unfortunately.

[jacob-carlborg]

1. Should this be an extension (it would still ship with CodeEdit)

Probably.

2. Should the preview be in the same tab or a separate tab?

Ideally configurable.

3. Should the preview be open by default?

Ideally configurable.

4. For .md files only, .mdx?

Ideally configurable. In TextMate the user can freely map file extensions to languages. Then all commands are tied to languages and not file extensions. Languages are recognized based of file extensions. Bundles come with a set of preconfigured mappings.

5. Command, menu item, keyboard shortcut to show/hide preview?

Yes.

6. Because markdown outputs html, would it be appropriate to render the preview in a webview or do we want to try to parse it as a native view?

Probably a webview since it's usually possible to include a few selected raw HTML tags.

7. Do we want to handle markdown flavors?

GitHub flavored Markdown would be nice.

I think many of these questions are related to the first question. The way this is done in TextMate is via a bundle (extension). TextMate has a generic output window. The bundle chooses the type of output, plain text or HTML. For HTML TextMate will open a output window with a webview. For plain text it will just render the text in the output window. Since the output window is not tied to the Markdown feature, but a generic feature of TextMate, it's possible to configure if it should open a new window or open a new pane within the existing window. It's also possible to configure the placement of the pane. The Markdown bundle that ships with TextMate is for regular Markdown. But, since it's just a bundle, there are other bundles available that support various Markdown flavors.

If the feature is not implemented as an extension and instead built-in, and the output pane/window/tab is specific for the Markdown feature, then it might not be worth support various settings on how/when/where the output should appear. But if it's a generic output view that can be reused for other things, then I definitely think the placement of the view should be configurable.

In TextMate the output window is used for other bundles as well, like the HTML bundle. It has a Preview command, just as the Markdown bundle. Same name of the command/menu item, same keyboard shortcut, they all follow the same convention. See my comment here https://github.com/CodeEditApp/CodeEdit/issues/262#issuecomment-1404211388 which is a bit related.