atom-preview

atom-preview copied to clipboard

(Already covered in the markdown-preview atom package, but would still be nice for it to be universal)

I wrote some support for Markdown to HTML, however, it currently displays HTML in the preview window instead of what the HTML would actually render. This may be useful for some, but I didn't create a PR since I don't think it should be published in this state.

Another feature to consider when this gets implemented: default syntax highlighting in code blocks based on the file extension(s). For example:

File extension	Default grammar for code blocks without fence names
.litcoffee, .coffee.md	CoffeeScript
.js.md	JavaScript
.less.md	LESS
.anything.md	Grammar associated with .anything

Maybe a port or wrapper of Linguist could be used to auto-detect the grammar of non-fenced code blocks, and if that fails, the grammar based on the file extension will be used.

Example: consider a file named post.html.md

This is a post about HTML. Here's some HTML code:

    <p id=status>
      This page has super cow powers.</p>

Here's some JavaScript:

```js
alert('What is the answer to life the universe and everything?');
```

And some CSS:

    body {
      font-family: 'Comic Sans' !important;
      color: #ff0 !important;
    }

Should render as:

This is a post about HTML. Here's some HTML code:

<p id=status>
  This page has super cow powers.</p>

Here's some JavaScript:

alert('What is the answer to life the universe and everything?');

And some CSS:

body {
  font-family: 'Comic Sans' !important;
  color: #ff0 !important;
}

@jordanbtucker I don't think people should actually change part of the filenames just for the previewer.

But the usual block code notation would be really helpful: '''coffeescript var x = 1 '''

After #32 this will become a little more difficult to implement, given that the new focus is on source-to-source compilers (transpilers), and will be using an extended EditorView from now on. However, as was done with https://github.com/Glavin001/atom-preview/commit/5c723c40ed1e64a2801cd6d7d65c54378644e958 to allow for popup message overlays, we can provide an HTML overlay such that language renderers could display more than text and could provide HTML (Spacepen Views) to render -- which would overlay the EditorView when applicable.

Would this overlay still auto-update upon change of the source file? If so, I think that actually makes sense, given that Markdown output is not something that you would want to save as its own file or for which you need line numbers etc...

Exactly! I think this is ideal, too.

Use Marked, I believe is the latest and greatest. I am assuming it supports GitHub Flavoured Markdown, given it is the successor of https://www.npmjs.org/package/github-flavored-markdown

Would anyone like to contribute and make a PR for this? I am available today to help out, too. If not, I may get started on adding the HTML layer and providing a little API for Preview renderers to use.

@jordanbtucker I am going to look into your PR and implement the HTML overlay for displaying the HTML preview and not the HTML code.

• [ ] Be sure to use properly styling to match GitHub's. See https://github.com/sindresorhus/github-markdown-css

It would make sense to include partial Multimarkdown/PHP Markdown Extra support too (<= see that specific feature request).