@rasahq/xdm-tabula
API
md2Html |
xxx |
md2InlineHtml |
xxx |
mdx2Jsx |
xxx |
mdx2InlineJsx |
xxx |
mdxCompile |
xxx |
MDXRenderer |
renders mdx-jsx string |
MDXProvider |
provides Context to MDXRenderer |
compileMDX(str, { inline: true })
renderMarkdown(str, { inline: true })
compile mdx process markdown render
questions
- does this fully work with SSR on Next and Gatsby
MDX compile and render steps
GOALS
- automatically replace
a
with projectLink
component - automatically extract a list of the magic shortcodes contained in an MDX block
markdown compile & render steps
GOALS
- automatically replace
a
with projectLink
component
unified processing
babel configuration
GOALS
- use the config which is local to the project
- keep processing low, as in the
lessBabel
option in gatsby-plugin-mdx
NOTES
- when no config is present and no
targets
option is passed, preset-env defaults to preset-latest, transforming everything down to ES5 (bad—planned to be revised in babel 8); therefore it must always be used with a config, or with a specialtargets
string, e.g.:-
targets: { esmodules: true }
will ignore browser configs and build for module-supporting browsers. this is ideal for a two-part build, where you are serving two bundle types
-
- other options:
-
bugfixes
: this option "tries to compile the broken syntax to the closest non-broken modern syntax supported by your target browsers", consolidating various features sets in a smaller and smarter way (worth a try) -
useBuiltIns
: defaults tofalse
, could be'entry'
or'usage'
: in the latter cases it's recommended to also addcore-js@3
and specify thecorejs: 3
option. (question: what does gatsby do here?) -
browserslistEnv
: tells babel to use a specific environment; probably should not be specified at library level but rather in project; applies to projects which specify environment sub-configs that key off ofBROWSERSLIST_ENV
orNODE_ENV
.
-
- recommended configuration method:
-
babel
recommends using.browserslistrc
. Here you specify queries in separate lines in a plain text file. -
browserslist
recommends usingbrowserslist
key inpackage.json
. Here you specify queries as separate strings in an array.
-
- about additional plugins:
-
babel-plugin-remove-export-keywords
comes from @mdx-js and seems only relevant to files; we are going to assume that our MDX strings from the CMS contain neither imports nor exports, but as noted in this issue thread, the combination of skipExport: true and this plugin can be used to turn an MDX file in to a function, as a beginning transformation -
babel-plugin-remove-make-shortcode
andbabel-plugin-remove-imports
are being kept around here, in case they are useful for eventualy file (page-component) MDX parsing
-
/* CONSIDER as defaults: https://github.com/remarkjs/remark-squeeze-paragraphs https://github.com/rehypejs/rehype-minify/tree/main/packages/rehype-minify-whitespace */
module.exports = { remarkPlugins: [ // [require('./lib/remark-abbr'), {}], [require('remark-kbd'), {}], [require('remark-mark-plus'), {}], [require('remark-sources'), {}], // [require('remark-images'), {}], // [require('remark-collapse'), { test: '' }], // [require('remark-unwrap-images'), {}], // [require('./plugins/remark-figure-caption'), {}], ], rehypePlugins: [[require('./rehype-figure'), {}]], };