fix: Fix skipHtml does not work. (#205)

Author: jaywcjlove

README.md

@@ -107,7 +107,7 @@ This [`ReactMarkdownProps`](https://github.com/remarkjs/react-markdown/tree/02ba
     Markdown to parse
 - `className` (`string?`)\
     Wrap the markdown in a `div` with this class name
-- `skipHtml` (`boolean`, default: `false`)\
+- `skipHtml` (`boolean`, default: ~~`false`~~ -> [`true`](https://github.com/uiwjs/react-markdown-preview/issues/205) )\
     Ignore HTML in Markdown completely
 - `sourcePos` (`boolean`, default: `false`)\
     Pass a prop to all components with a serialized position

package.json

@@ -61,6 +61,7 @@
     "rehype-autolink-headings": "~6.1.1",
     "rehype-ignore": "^1.0.1",
     "rehype-prism-plus": "~1.5.0",
+    "rehype-raw": "^6.1.1",
     "rehype-rewrite": "~3.0.6",
     "rehype-slug": "~5.0.1",
     "remark-gfm": "~3.0.1",

src/index.tsx

@@ -3,6 +3,7 @@ import ReactMarkdown, { Options } from 'react-markdown';
 import { Element } from 'hast';
 import { PluggableList } from 'unified';
 import gfm from 'remark-gfm';
+import raw from 'rehype-raw';
 import slug from 'rehype-slug';
 import headings from 'rehype-autolink-headings';
 import rehypeAttrs from 'rehype-attr';
@@ -41,6 +42,7 @@ export default React.forwardRef<MarkdownPreviewRef, MarkdownPreviewProps>((props
     source,
     style,
     disableCopy = false,
+    skipHtml = true,
     onScroll,
     onMouseOver,
     pluginsFilter,
@@ -85,12 +87,16 @@ export default React.forwardRef<MarkdownPreviewRef, MarkdownPreviewProps>((props
       return /^[A-Za-z0-9]+$/.test(element.tagName);
     },
   };
+  if (skipHtml) {
+    rehypePlugins.push(raw);
+  }
   const remarkPlugins = [...(other.remarkPlugins || []), gfm];
   return (
     <div ref={mdp} onScroll={onScroll} onMouseOver={onMouseOver} {...warpperElement} className={cls} style={style}>
       <ReactMarkdown
-        {...other}
         {...customProps}
+        {...other}
+        skipHtml={skipHtml}
         rehypePlugins={pluginsFilter ? pluginsFilter('rehype', rehypePlugins) : rehypePlugins}
         remarkPlugins={pluginsFilter ? pluginsFilter('remark', remarkPlugins) : remarkPlugins}
         children={source || ''}

website/App.tsx

@@ -37,7 +37,7 @@ const App = () => {
           spellCheck="false"
           onChange={(e) => setValue(e.target.value)}
         />
-        <MarkdownPreview className="App-editor-preview" source={value} />
+        <MarkdownPreview skipHtml={false} className="App-editor-preview" source={value} />
       </div>
       <MarkdownPreview className="App-markdown" source={MDStr.replace(/([\s\S]*)<!--dividing-->/, '')} />
       <div className="App-footer">