Use npm package names to load internal deps (#294)

* Use npm package names to load internal deps

This is necessary so that published Astro components work. These components will be built by esinstall and therefore they cannot rely on `_astro_internal`. The fix is to use npm specifiers everywhere.

* Move most of frontend to internal

* Mark astro/internal/markdown.js as external

* Move markdown stuff to its own package

This moves the markdown stuff to its own package so that we can externalize it in the markdown component.

* Add the changeset

1 files changed, 43 insertions, 0 deletions

diff --git a/packages/markdown-support/src/codeblock.ts b/packages/markdown-support/src/codeblock.ts
new file mode 100644
index 000000000..2f48c6631
--- /dev/null
+++ b/packages/markdown-support/src/codeblock.ts
@@ -0,0 +1,43 @@
+import { visit } from 'unist-util-visit';
+
+/**  */
+export function remarkCodeBlock() {
+  const visitor = (node: any) => {
+    const { data, meta } = node;
+    let lang = node.lang || 'html'; // default to html matches GFM behavior.
+
+    let currentClassName = data?.hProperties?.class ?? '';
+    node.data = node.data || {};
+    node.data.hProperties = node.data.hProperties || {};
+    node.data.hProperties = { ...node.data.hProperties, class: `language-${lang} ${currentClassName}`.trim(), lang, meta };
+
+    return node;
+  };
+  return () => (tree: any) => visit(tree, 'code', visitor);
+}
+
+/**  */
+export function rehypeCodeBlock() {
+  const escapeCode = (code: any) => {
+    code.children = code.children.map((child: any) => {
+      if (child.type === 'text') {
+        return { ...child, value: child.value.replace(/\{/g, '{') };
+      }
+      return child;
+    });
+  };
+  const visitor = (node: any) => {
+    if (node.tagName === 'code') {
+      escapeCode(node);
+      return;
+    }
+
+    if (node.tagName !== 'pre') return;
+    const code = node.children[0];
+    if (code.tagName !== 'code') return;
+    node.properties = { ...code.properties };
+
+    return node;
+  };
+  return () => (tree: any) => visit(tree, 'element', visitor);
+}