Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

能否提供 markdownParser 接口,我希望在浏览器编译 jsx less #42

Closed
nimoc opened this issue Dec 28, 2016 · 6 comments
Closed

Comments

@nimoc
Copy link

nimoc commented Dec 28, 2016

markrun('````js\nconsole.log(1)\n````',{template:''})

代码运行结果

<pre>console.log(1)</pre>
<script>console.log(1)</script>

如果能提供 markdownParser 接口,我就可以利用 markrun 在浏览器编译 jsx less

浏览器运行示例
github:markrun

@QingWei-Li
Copy link
Member

我晚上研究下,看下有没有支持的可行性,或许可以提供定制插件的功能

@nimoc
Copy link
Author

nimoc commented Dec 30, 2016

markrun 是对 markdown 中书写代码的一个增强,普通 markdown 可以用

```js
console.log('some')
```

书写代码块,最终以 pre包裹代码。

markrun 可对 四个 ` 符号 + 语言进行编译

````js
console.log('some')
````

比如 js 默认配置是生成

<pre>console.log(1)</pre>
<script>console.log(1)</script>

但也可以对 js 进行自定义配置,利用 浏览器中的 babel 编译js

````js
const str = `
abc ${document.title}
`
````
<pre>
const str = `
abc ${document.title}
`
</pre>
<script>
var str = "\n  abc " + document.title + "\n";
</script>

我主要的目的是想 markrun + docsify 编译 jsx ,这样写文档就生成了示例。不需要维护文档代码和示例代码(容易出错)。

````js
ReactDOM.render(<App title="some" />, document.getElementById('node'))
````

```
<pre>
ReactDOM.render(<App title="some" />, document.getElementById('node'))
</pre>
<script>
ReactDOM.render(React.createElement(App, { title: "some" }), document.getElementById('node'));
</script>
```

平时我主要将 markrun 用在构建中,但是有些小型项目能直接用 docsify 结合 markrun 不构建能生成文档还能有示例就爽多了。

@egoist
Copy link

egoist commented Dec 30, 2016

it would be very very slow 😂

@QingWei-Li
Copy link
Member

QingWei-Li commented Jan 4, 2017

@nimojs Hi

我会在下一个 minor version 支持这个特性,用法如下

  window.$docsify = {
    markdown: function (marked) {
      return function (content) {
        return markrun(content, {
          markdownParser: marked
        })
      }
    }
  }

我有两点疑问:

  1. markrun 可以提供类似 marked#setOptions 的方法么,这样的话就可以改写成
    function (marked) {
      markrun.setOptions({
        markdownParser: marked
      })
      return marked
    }
  1. 我测试了下 js 似乎并没有执行,虽然看见 DOM 上已经有 script 标签了。文档是异步加载的,你看下你能支持下吗?

如果没问题的话我将发布这个版本

-- update

1.5.0 已发布

@nimoc
Copy link
Author

nimoc commented Jan 5, 2017

@QingWei-Li 👍

我测试了一下,目前 docsify 提供的 markdown 函数接口能满足我的需求了。

  1. markrun 可以提供类似 marked#setOptions 的方法么,这样的话就可以改写成

我增加 setOptions 方法

  1. 我测试了下 js 似乎并没有执行,虽然看见 DOM 上已经有 script 标签了。文档是异步加载的,你看下你能支持下吗?

我研究下,看是在 markrun 编译阶段直接 eval(source) 还是用别的方式。

@nimoc nimoc closed this as completed Jan 5, 2017
@nimoc
Copy link
Author

nimoc commented Jan 5, 2017

docsify 浏览器编译react页面: https://markrun.github.io/markrun-docsify/
页面源码: https://github.com/markrun/markrun-docsify

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants