How to use the marksy/jsx function in marksy

To help you get started, we’ve selected a few marksy examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github mineral-ui / mineral-ui / src / website / app / Markdown.js View on Github external
const Markdown = (props: MarkdownProps) => {
  const {
    anchors,
    children,
    className,
    scope,
    standalone,
    ...restProps
  } = props;
  const rootProps = {
    className: className ? `markdown ${className}` : 'markdown',
    ...restProps
  };

  const compile = marksy({
    createElement,
    elements: {
      a({ href, children }: mdLinkProps) {
        let linkProps = { to: href };
        if (isNormalLink(href)) {
          if (standalone && href.startsWith('#')) {
            // When viewing a standalone example, convert any same-page anchor
            // links to routed ones
            linkProps = { to: href.replace('#', '') };
          } else {
            linkProps = { href };
          }
        }
        return {children};
      },
      blockquote(props) {
github wfp / ui / .storybook / lucid-docs-addon / ChildComponents.js View on Github external
...coy,
  'code[class*="language-"]': {
    ...coy['code[class*="language-"]'],
    tabSize: '2',
  },
  'pre[class*="language-"]': {
    ...coy['pre[class*="language-"]'],
    backgroundColor: '',
    fontSize: 12,
  },
};

registerLanguage('jsx', jsx);
registerLanguage('json', json);

const compile = marksy({
  createElement: React.createElement,
  highlight: (language, code) =>
    ReactDOMServer.renderToStaticMarkup(
      
        {code}
      
    ),
  elements: {
    p: props =&gt; <p style="{{">,
  },
});

const styles = {
  divider: {
    backgroundColor: 'rgb(236,236,236)',
    height: 1,</p>
github jepser / site-contentful / components / MarkDown / index.js View on Github external
},
    li: props =&gt; {
      return 
    },
    code: ({ language, code }) =&gt; {
      if (language !== 'cta') {
        return <pre>{code}</pre>
      }

      return 
    },
    codespan: props =&gt; {
      return <code>
    }
  }
  const compile = marksy({
    createElement,
    elements: renderers,
    components: {
      Cui (props) {
        return 
      }
    }
  })
  const compiled = compile(children)

  return compiled.tree
}
export default MarkDown</code>
github wfp / ui / .storybook / lucid-docs-addon / PropTypes.js View on Github external
...coy,
  'code[class*="language-"]': {
    ...coy['code[class*="language-"]'],
    tabSize: '2',
  },
  'pre[class*="language-"]': {
    ...coy['pre[class*="language-"]'],
    backgroundColor: '',
    fontSize: 12,
  },
};

registerLanguage('jsx', jsx);
registerLanguage('json', json);

const compile = marksy({
  createElement: React.createElement,
  highlight: (language, code) =&gt;
    ReactDOMServer.renderToStaticMarkup(
      
        {code}
      
    ),
  elements: {
    p: props =&gt; <p style="{{">,
  },
});

const style = {
  a: {
    textDecoration: 'none',
    color: '#2abbb0',</p>
github Terminal / discordapps.dev / client / pages / DocPage / DocPageContentBox / index.js View on Github external
render() {
    const page = this.props.page;

    const compiler = marksy({
      createElement,
      elements: {
        img: ({src, alt}) =&gt; ,
        table: ({children}) =&gt; <table></table>{children},
        h1: ({children, id}) =&gt; {children},
        h2: ({children, id}) =&gt; {children},
        h3: ({children, id}) =&gt; {children},
        h4: ({children, id}) =&gt; {children},
        h5: ({children, id}) =&gt; {children},
        h6: ({children, id}) =&gt; {children},
      },
      highlight: (language, code) =&gt; hljs.highlight(language, code).value
    });

    const compiled = compiler(page);

marksy

Convert markdown into react components

MIT
Latest version published 6 years ago

Package Health Score

58 / 100
Full package analysis