search

onivim / oni

Oni: Modern Modal Editing - powered by Neovim
https://www.onivim.io
MIT License
11.35k stars 301 forks source link

enhance markdown preview #2153

Open meijieru opened 6 years ago

meijieru commented 6 years ago

Currently following wondelful features are missed for markdown preview, for reference

```html
<!DOCTYPE html>
<html>
    <head>
        <mate charest="utf-8" />
        <title>Hello world!</title>
    </head>
    <body>
        <h1>Hello world!</h1>
    </body>
</html>
badosu commented 6 years ago

The simplest way to achieve that would be to embed mathjax script in the rendered page: https://www.mathjax.org/

TalAmuyal commented 6 years ago

Nice suggestion, will give it a try!

On Mon, Apr 30, 2018, 17:38 Amadeus Folego notifications@github.com wrote:

The simplest way to achieve that would be to embed mathjax script in the rendered page: https://www.mathjax.org/

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/onivim/oni/issues/2153#issuecomment-385418150, or mute the thread https://github.com/notifications/unsubscribe-auth/AE3IjUmnfnGp3NYhrzd04eHmPxWCXoXRks5ttyHmgaJpZM4TsoMr .

TalAmuyal commented 6 years ago

Started hacking a PoC, will report back when it works.

TalAmuyal commented 6 years ago

Refactored the Markdown-Preview so more languages could be previewed. When trying to use MathJax, Oni dies.

The following code reproduces the error:

const mjAPI = require("mathjax-node");
mjAPI.config({ MathJax: {} });
mjAPI.start();

Note that this is the MathJax's example code. Opened an issue: https://github.com/mathjax/MathJax-node/issues/408

Anyone has any idea how to fix this?

badosu commented 6 years ago

I as thinking of embedding mathjax inside the processed html itself, so that if it fails it is soft. e.g. script not loading, no connection or any error simply fails in the browser javascript environment.

I.E. simply including: 

<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/latest.js?config=TeX-MML-AM_CHTML' async></script>

The only drawback to that would be to ensure no markdown processing is happening inside tex blocks.

TalAmuyal commented 6 years ago

I believe it requires an internet connection. Though it just means we need to bundle the file in Oni's source-code and use a local path...

TalAmuyal commented 6 years ago

Added a PR for latex preview (https://github.com/onivim/oni/pull/2184)

CrossR commented 6 years ago

I'm pretty interested in a few of these too!

I'm attempting to use a markdown style syntax for note taking, so tables, code syntax highlighting and TODOs would be very useful for me.

Few other bits I've noticed around relating to general improvements:

badosu commented 6 years ago

@CrossR Maybe a lot of these features are just not enabled, because marked states in its documentation that it supports some comprehensive specs, like Github Flavoured Markdown, see.

badosu commented 6 years ago

Btw, this might be an interesting take: https://github.com/euclio/vim-markdown-composer, if possible to replace the browser that would be used with the web view from electron.

CrossR commented 6 years ago

@badosu looks to be the case!

Following this link, it looks like there is a lot to mess with.

Setting the base URL to this.props.oni.workspace.activeWorkspace (Ie the current project base) fixed the relative image loading issue.

There is some bits in there for code highlighting and tables too. I did a quick test of the code highlighting and could see the classes being appended correctly to the HTML, but the styles themselves were not being applied since I wasn't ever passing over the styles.

The highligher and those config options look like something we could mess with. Ie we could offer the option to enable/disable GFM and other features, as well as the highlighters look to contain a few choices of theme to use for it.

CrossR commented 6 years ago

As a comment on some of the other bits outlined here:

EDIT:

I've got code block highlighting added in a separate build:

image

CrossR commented 6 years ago

I've ticked off a few bits I added in my recent PRs.

Technically I added ToDo support, but that was accidental since the latest version of our markdown library added them for free. They do need a bit nicer styling though, since they look a bit odd currently.