# Using Github Flavored Markdown in the Netlify CMS Preview Pane Document editing mode on Netlify CMS gives you two panes, one with the editor, and one with a preview. By using the global `CMS` object you can customize the preview. What we're going to do here is to make it render the markdown we write in the editor with [`react-markdown`](https://github.com/remarkjs/react-markdown) which we extend with the [`remark-gfm`](https://github.com/remarkjs/remark-gfm) plugin to add support for Github Flavored Markdown (tables, strikethrough, etc). ![Screenshot of Netlify CMS with GFM enabled preview](https://tobbe.github.io/assets/gfm_screenshot.png "NetlifyCMS GFM screenshot") The way the preview customization works is you tell `CMS` what collection to use the custom preview for, and you give it a React component to use. You can only write old-school class components, and you have to use the `createClass` and `h` helper functions provided by NetlifyCMS. Below is an example that creates a `DocPreview` React component and tells `CMS` to use that whenever it's showing a preview for a document in the `"pages"` category. The `render()` function uses the `widgetFor()` helper function (read more in the [NetifyCMS docs](https://www.netlifycms.org/docs/customization/#registerpreviewtemplate)) to get the default widget used to display the `'body'` field, and nothing else. By default the preview will show all fields, like "title" etc, but here we're stripping those out. ```html Netlify CMS Example ``` Another thing we can do is take the plain text from the "body" field and dump it in a `
` with the `h()` function, which is basically just an alias for [React's `createElement()`](https://reactjs.org/docs/react-api.html#createelement). ```html Netlify CMS Example ``` Since we're writing all the code in a basic `index.html` file without any kind of build tooling to support us we can't just do `npm install` and then `include`-ing the package. All we have to work with is the ` ``` The final step is to add support for Github Flavored Markdown, so we can do tables, strikethrough text and other things. The `window.ReactMarkdown` component takes a `plugin` prop that lets you augment it with different plugins, one which is [`remark-gfm`](https://github.com/remarkjs/remark-gfm). Unfortunately that package doesn't have a UMD build for us to use, it's only available in CJS (CommonJS) format. There is a tool called Browserify that takes CJS modules and converts them to modules that can be used by the browser. But it's a command line tool that you'd add to your tooling. Which, we don't have here. Thankfully someone turned it into a web service we can use! https://wzrd.in takes any npm package and tries to run it through Browserify and serves up the built package for you. First time it's run it takes a while, but after that it's cached and then it's much faster. Here's the link for the Browserified version of remark-gfm: https://wzrd.in/standalone/remark-gfm@1.0.0. Add that to a script tag and you'll have the plugin available at `window.remarkGfm`. Add that as a plugin to react-markdown and you're done! ```html Netlify CMS Example ``` Try writing some markdown jazzed up with a bit of gfm syntax to make sure everything works. That's it. Hope this guide was helpful! (Header photo by Richy Great on Unsplash)