帮酷LOGO
  • 显示原文与译文双语对照的内容
文章标签:react  Markdown  COM  MARK  
Compile Markdown to React with mdast

  • 源代码名称:remark-react
  • 源代码网址:http://www.github.com/mapbox/remark-react
  • remark-react源代码文档
  • remark-react源代码下载
  • Git URL:
    git://www.github.com/mapbox/remark-react.git
  • Git Clone代码到本地:
    git clone http://www.github.com/mapbox/remark-react
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/mapbox/remark-react
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • 注释

    Build Status

    注释反应编译 Markdown 以反应。 构建于 注释,广泛测试和可以插入的解析器。

    为什么在 React.js 中使用innerHTML和dangerouslySetInnerHTMLXSS攻击的常见原因:? 用户输入可以包括脚本标记和其他类型的活动内容,这些内容跨越域并危害安全性。 注释在响应中生成一个 DOM,使用 React.createElement: 这意味着你可以在应用程序中显示已经解析的&格式的Markdown 内容,而无需使用 dangerouslySetInnerHTML

    安装

    npm:

    npm install remark-react

    table-内容

    编程

    注释。使用 ( 响应,选项)

    参数

    • react - 这里插件;
    • options ( Object? ) 请参见 below

    让我们假设 example.js 如下所示:

    var React =require('react'),
     remark =require('remark'),
     reactRenderer =require('remark-react');var App =React.createClass({
     getInitialState() {
     return { text:'# hello world' };
     },
     onChange(e) {
     this.setState({ text:e.target.value });
     },
     render() {
     return (<div><textarea
     value={this.state.text}
     onChange={this.onChange} /><div id='preview'> {remark().use(reactRenderer).processSync(this.state.text).contents}
     </div></div>);
     }
    });React.render(<App />, document.getElementById('app'));

    配置

    所有选项,包括 options 对象本身,都是可选的:

    • sanitize ( object 或者 boolean,默认值: undefined ) - 要使用的卫生设备模式。 传递给 hast-util-sanitize 。 如果没有通过或者 true的默认模式,则遵循github规则的sanitation 。 如果 false 被传递,它不会消毒输入。

    • prefix ( string,默认值: h- ) - 响应键。

    • createElement ( Function,默认值: require('react').createElement ) - 用于创建元素的函数。

    • remarkReactComponents ( object,默认值: undefined ) - 提供一种方法,通过定义由 element: Component key-value 对组成的对象来覆盖默认元素的( <a><p> 等) 。 例如要输出 <MyLink> 组件而不是 <a>,而要输出 <MyParagraph>,而不是 <p>:

      remarkReactComponents: {
       a: MyLink,
       p: MyParagraph
      }

      ,: GFM在 tdth 上使用 align,并且不喜欢这样做,我们通过 remarkReactComponents 覆盖它们,通过来使用 style.textAlign 来替代。 这意味着如果设置 td 或者 td,你将需要亲自处理 align

    • toHast ( object,默认值: {} ) - 提供用于转换MDAST文档的选项。 有关设置,请参阅 mdast-util-to-hast

    这些可以作为第二个参数传递给 remark.use()

    插件集成

    评论 react react:::

    所有 注释节点可以编译为 HTML 。 另外,在每个上对 attributes 对象进行注释,并将找到的属性作为HTML属性添加到编译的标记中。

    此外,语法高亮可以包括( 完全虚拟) 和 remark-react-lowlight 语句。

    许可证

    作者:,©,modified,modified,modified,modified,modified,modified,modified,modified,modified 。



    文章标签:COM  react  MARK  Markdown  

    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语