Skip to content
New issue

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

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

Already on GitHub? # 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

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

No branches or pull requests

3 participants