How to use marksy - 10 common examples
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.
mineral-ui / mineral-ui / src / website / app / Markdown.js View on Github 
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) {import React from 'react';
import _ from 'lodash';
import addons from '@storybook/addons';
import { getPropsData, stripIndent} from './util';
import marksy from 'marksy';
const compile = marksy({ createElement: React.createElement });
const isReactComponent = value =>
typeof value === 'function' &&
value.prototype &&
value.prototype.isReactComponent;
const isChildComponent = (value, key) =>
isReactComponent(value) || (/^[A-Z]/.test(key) && _.isFunction(value));
const getChildComponentsData = (
componentRef,
maxRecursiveHeight = 1,
recursiveHeight = 0,
path = []
) => {
if (recursiveHeight >= maxRecursiveHeight) {export default function renderInfoContent(content) {
const marksyConf = { ...defaultMarksyConf };
const markdownInfo = marksy(marksyConf, content);
if (!content || content === '' || typeof content !== 'string') {
return null;
}
const lines = content.split('\n');
while (lines[0].trim() === '') {
lines.shift();
}
let padding = 0;
const matches = lines[0].match(/^ */);
if (matches) {
padding = matches[0].length;
}
const source = lines.map(s => s.slice(padding)).join('\n');import { createElement } from 'react';
import marksy from 'marksy/components';
import { A, H1, H2, H3, H4, H5, P, Li, Ol, Ul, Hr, Code, Blockquote, ArticleHeader, Video } from '~/templates/global/styled';
import { Img } from '~/templates/content/styled';
import ContentTemplate from '~/templates/content/Template';
import Example from '~/components/examples/Example';
import CodePen from '~/components/examples/CodePen';
const removeEmpty = filename => filename !== '';
const convertMarkdown = marksy({
createElement,
elements: {
a: A,
h1: ArticleHeader,
h2: H2,
h3: H3,
h4: H4,
h5: H5,
p: P,
code: Code,
li: Li,
ol: Ol,
ul: Ul,
hr: Hr,
img: Img,
blockquote: Blockquote,import { createElement } from 'react';
import marksy from 'marksy/components';
import { A, H1, H2, H3, H4, P, Li, Ul, Hr, Code, Blockquote, ArticleHeader } from '~/templates/global/styled';
import { Img } from '~/templates/content/styled';
import ContentTemplate from '~/templates/content/Template';
import Example from '~/components/examples/Example';
import CodePen from '~/components/examples/CodePen';
const removeEmpty = filename => filename !== '';
const convertMarkdown = marksy({
createElement,
elements: {
a: A,
h1: ArticleHeader,
h2: H2,
h3: H3,
h4: H4,
p: P,
code: Code,
li: Li,
ul: Ul,
hr: Hr,
img: Img,
blockquote: Blockquote,
},
components: {import { createElement } from 'react';
import marksy from 'marksy/components';
import { A, H1, H2, H3, H4, H5, P, Li, Ol, Ul, Hr, Code, Blockquote, ArticleHeader, Video } from '~/templates/global/styled';
import { Img } from '~/templates/content/styled';
import ContentTemplate from '~/templates/content/Template';
import Example from '~/components/examples/Example';
import CodePen from '~/components/examples/CodePen';
const removeEmpty = filename => filename !== '';
const convertMarkdown = marksy({
createElement,
elements: {
a: A,
h1: ArticleHeader,
h2: H2,
h3: H3,
h4: H4,
h5: H5,
p: P,
code: Code,
li: Li,
ol: Ol,
ul: Ul,
hr: Hr,
img: Img,
blockquote: Blockquote,import { createElement } from 'react';
import marksy from 'marksy/components';
import { A, H1, H2, H3, H4, H5, P, Li, Ol, Ul, Hr, Code, Blockquote, ArticleHeader, Video } from '~/templates/global/styled';
import { Img } from '~/templates/content/styled';
import ContentTemplate from '~/templates/content/Template';
import Example from '~/components/examples/Example';
import CodePen from '~/components/examples/CodePen';
import CodeSandbox from '~/components/examples/CodeSandbox';
import TOC from '~/templates/content/TableOfContents';
const removeEmpty = filename => filename !== '';
const convertMarkdown = marksy({
createElement,
elements: {
a: A,
h1: ArticleHeader,
h2: H2,
h3: H3,
h4: H4,
h5: H5,
p: P,
code: Code,
li: Li,
ol: Ol,
ul: Ul,
hr: Hr,
img: Img,
blockquote: Blockquote,import { createElement } from 'react';
import marksy from 'marksy/components';
import { A, H1, H2, H3, H4, H5, P, Li, Ol, Ul, Hr, Code, Blockquote, ArticleHeader, Video } from '~/templates/global/styled';
import { Img } from '~/templates/content/styled';
import ContentTemplate from '~/templates/content/Template';
import Example from '~/components/examples/Example';
import CodePen from '~/components/examples/CodePen';
const removeEmpty = filename => filename !== '';
const convertMarkdown = marksy({
createElement,
elements: {
a: A,
h1: ArticleHeader,
h2: H2,
h3: H3,
h4: H4,
h5: H5,
p: P,
code: Code,
li: Li,
ol: Ol,
ul: Ul,
hr: Hr,
img: Img,
blockquote: Blockquote,import { createElement } from 'react';
import marksy from 'marksy/components';
import { A, H1, H2, H3, H4, H5, P, Li, Ol, Ul, Hr, Code, Blockquote, ArticleHeader, Video } from '~/templates/global/styled';
import { Img } from '~/templates/content/styled';
import ContentTemplate from '~/templates/content/Template';
import Example from '~/components/examples/Example';
import CodePen from '~/components/examples/CodePen';
const removeEmpty = filename => filename !== '';
const convertMarkdown = marksy({
createElement,
elements: {
a: A,
h1: ArticleHeader,
h2: H2,
h3: H3,
h4: H4,
h5: H5,
p: P,
code: Code,
li: Li,
ol: Ol,
ul: Ul,
hr: Hr,
img: Img,
blockquote: Blockquote,import { createElement } from 'react';
import marksy from 'marksy/components';
import { A, H1, H2, H3, H4, H5, P, Li, Ol, Ul, Hr, Code, Blockquote, ArticleHeader, Video } from '~/templates/global/styled';
import { Img } from '~/templates/content/styled';
import ContentTemplate from '~/templates/content/Template';
import Example from '~/components/examples/Example';
import CodePen from '~/components/examples/CodePen';
const removeEmpty = filename => filename !== '';
const convertMarkdown = marksy({
createElement,
elements: {
a: A,
h1: ArticleHeader,
h2: H2,
h3: H3,
h4: H4,
h5: H5,
p: P,
code: Code,
li: Li,
ol: Ol,
ul: Ul,
hr: Hr,
img: Img,
blockquote: Blockquote,
