dannyhw · July 4, 2024 13:16
diff --git a/MarkdownWebview.tsx b/MarkdownWebview.tsx
 import { SafeAreaView, Platform } from 'react-native'
 import WebView from "react-native-webview";


 const markdown = `
 - hello from markdown
 - test

 ---

 \`\`\`ts
 const abc = 1
 \`\`\`

 \$1

 | Tables        | Are           | Cool   |
 | ------------- |:-------------:| ------:|
 | **col 3 is**  | right-aligned | \$1600 |
 | col 2 is      | *centered*    |   \$12 |
 | zebra stripes | ~~are neat~~  |    \$1 |
 `

 const markdownFixed = markdown.replaceAll("`", "\\`").replaceAll("$", "\\$")

 export default function Page() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
    <WebView
    //scrollEnabled={false}
    allowsBackForwardNavigationGestures={false}
    javaScriptEnabled
    source={{
        html: `
 <!doctype html>
 <html>
 <head>
  <meta charset="utf-8"/>
  <title>Marked in the browser</title>
  <script src="https://unpkg.com/showdown/dist/showdown.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script>
  <style>
    body {
      padding: 16px 16px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple    Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    }
    * {
      font-size: 60px;
    }
    h1 {
      font-size: 100px;
    }
    li {
      
    }
    table {
      background: #fff;
      border: solid 1px #ddd;
      margin-bottom: 1.25rem;
      table-layout: auto
    }

    table caption {
        background: transparent;
        color: #222;
        font-size: 1rem;
        font-weight: bold
    }

    table thead {
        background: #F5F5F5
    }

    table thead tr th,table thead tr td {
        color: #222;
        font-size: 0.875rem;
        font-weight: bold;
        padding: 0.5rem 0.625rem 0.625rem
    }

    table tfoot {
        background: #F5F5F5
    }

    table tfoot tr th,table tfoot tr td {
        color: #222;
        font-size: 0.875rem;
        font-weight: bold;
        padding: 0.5rem 0.625rem 0.625rem
    }

    table tr th,table tr td {
        color: #222;
        font-size: 0.875rem;
        padding: 0.5625rem 0.625rem;
        text-align: left
    }

    table tr.even,table tr.alt,table tr:nth-of-type(even) {
        background: #F9F9F9
    }

    table thead tr th,table tfoot tr th,table tfoot tr td,table tbody tr th,table tbody tr td,table tr td {
        display: table-cell;
        line-height: 1.125rem
    }
  </style>
 </head>
 <body>
  <div id="content"></div>
  <script>
   // version using showdown
    showdown.setFlavor('github');
    var converter = new showdown.Converter({
      tables: true,
      strikethrough: true,
      smartIndentationFix: true,
      underline: true,
    })

    text = \`# test from showdown ${markdownFixed}\`,
    html = converter.makeHtml(text);
    document.getElementById('content').innerHTML = DOMPurify.sanitize(html)
  </script>

  <div id="content2"></div>
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <script>
  // version using marked:
    document.getElementById('content2').innerHTML =
      DOMPurify.sanitize(marked.parse(\`# test from marked ${markdownFixed}\`));
  </script>
 </body>
 </html>
 `,
      }}
      containerStyle={{
        //padding: 16 
      }}
      style={{ flex: 1,}}
    />
    </SafeAreaView>
  );
 }
	import { SafeAreaView, Platform } from 'react-native'
	import WebView from "react-native-webview";


	const markdown = `
	- hello from markdown
	- test

	---

	\`\`\`ts
	const abc = 1
	\`\`\`

	\$1

	\| Tables \| Are \| Cool \|
	\| ------------- \|:-------------:\| ------:\|
	\| col 3 is \| right-aligned \| \$1600 \|
	\| col 2 is \| centered \| \$12 \|
	\| zebra stripes \| ~~are neat~~ \| \$1 \|
	`

	const markdownFixed = markdown.replaceAll("`", "\\`").replaceAll("$", "\\$")

	export default function Page() {
	return (
	<SafeAreaView style={{ flex: 1 }}>
	<WebView
	//scrollEnabled={false}
	allowsBackForwardNavigationGestures={false}
	javaScriptEnabled
	source={{
	html: `
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>Marked in the browser</title>
	<script src="https://unpkg.com/showdown/dist/showdown.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script>
	<style>
	body {
	padding: 16px 16px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	}
	* {
	font-size: 60px;
	}
	h1 {
	font-size: 100px;
	}
	li {

	}
	table {
	background: #fff;
	border: solid 1px #ddd;
	margin-bottom: 1.25rem;
	table-layout: auto
	}

	table caption {
	background: transparent;
	color: #222;
	font-size: 1rem;
	font-weight: bold
	}

	table thead {
	background: #F5F5F5
	}

	table thead tr th,table thead tr td {
	color: #222;
	font-size: 0.875rem;
	font-weight: bold;
	padding: 0.5rem 0.625rem 0.625rem
	}

	table tfoot {
	background: #F5F5F5
	}

	table tfoot tr th,table tfoot tr td {
	color: #222;
	font-size: 0.875rem;
	font-weight: bold;
	padding: 0.5rem 0.625rem 0.625rem
	}

	table tr th,table tr td {
	color: #222;
	font-size: 0.875rem;
	padding: 0.5625rem 0.625rem;
	text-align: left
	}

	table tr.even,table tr.alt,table tr:nth-of-type(even) {
	background: #F9F9F9
	}

	table thead tr th,table tfoot tr th,table tfoot tr td,table tbody tr th,table tbody tr td,table tr td {
	display: table-cell;
	line-height: 1.125rem
	}
	</style>
	</head>
	<body>
	<div id="content"></div>
	<script>
	// version using showdown
	showdown.setFlavor('github');
	var converter = new showdown.Converter({
	tables: true,
	strikethrough: true,
	smartIndentationFix: true,
	underline: true,
	})

	text = \`# test from showdown ${markdownFixed}\`,
	html = converter.makeHtml(text);
	document.getElementById('content').innerHTML = DOMPurify.sanitize(html)
	</script>

	<div id="content2"></div>
	<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
	<script>
	// version using marked:
	document.getElementById('content2').innerHTML =
	DOMPurify.sanitize(marked.parse(\`# test from marked ${markdownFixed}\`));
	</script>
	</body>
	</html>
	`,
	}}
	containerStyle={{
	//padding: 16
	}}
	style={{ flex: 1,}}
	/>
	</SafeAreaView>
	);
	}