From b1f9a06fbf1a4c3a1964e9127af575259ce07551 Mon Sep 17 00:00:00 2001
From: Duane Nykamp <nykamp@umn.edu>
Date: Thu, 1 Aug 2024 17:25:38 -0500
Subject: [PATCH 1/7] Created nextra codeblocks for doenet-example,
 doenet-viewer, and doenet-editor.

---
 .../docs-nextra/components/doenet-example.tsx | 24 ++++++++++
 packages/docs-nextra/components/doenet.tsx    | 29 ++++++++++--
 .../docs-nextra/components/doenetInternal.tsx | 27 -----------
 .../components/doenetml-example.tsx           | 37 ---------------
 .../components/iframe-doenetml.tsx            | 23 ---------
 packages/docs-nextra/components/index.ts      |  3 +-
 packages/docs-nextra/next.config.mjs          | 14 +++++-
 packages/docs-nextra/pages/style.css          | 11 ++++-
 packages/docs-nextra/scripts/index.ts         |  3 ++
 .../docs-nextra/scripts/wrap-doenet-editor.ts | 47 +++++++++++++++++++
 .../scripts/wrap-doenet-example.ts            | 45 ++++++++++++++++++
 .../docs-nextra/scripts/wrap-doenet-viewer.ts | 42 +++++++++++++++++
 packages/doenetml-iframe/src/index.tsx        |  2 +-
 packages/doenetml/src/Viewer/PageViewer.jsx   |  2 +-
 14 files changed, 211 insertions(+), 98 deletions(-)
 create mode 100644 packages/docs-nextra/components/doenet-example.tsx
 delete mode 100644 packages/docs-nextra/components/doenetInternal.tsx
 delete mode 100644 packages/docs-nextra/components/doenetml-example.tsx
 delete mode 100644 packages/docs-nextra/components/iframe-doenetml.tsx
 create mode 100644 packages/docs-nextra/scripts/wrap-doenet-editor.ts
 create mode 100644 packages/docs-nextra/scripts/wrap-doenet-example.ts
 create mode 100644 packages/docs-nextra/scripts/wrap-doenet-viewer.ts

diff --git a/packages/docs-nextra/components/doenet-example.tsx b/packages/docs-nextra/components/doenet-example.tsx
new file mode 100644
index 000000000..8a21dfd71
--- /dev/null
+++ b/packages/docs-nextra/components/doenet-example.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { DoenetViewer } from "./doenet";
+import { Tabs } from "nextra/components";
+
+/**
+ * Render DoenetML as an example in documentation.
+ */
+export function DoenetExample({
+    source,
+    children,
+}: React.PropsWithChildren<{ source: string }>) {
+    return (
+        <div className="doenet-example-container">
+            <Tabs items={["Example", "Source"]} defaultIndex={0}>
+                <Tabs.Tab>
+                    <div className="doenetml-example">
+                        <DoenetViewer source={source} />
+                    </div>
+                </Tabs.Tab>
+                <Tabs.Tab>{children}</Tabs.Tab>
+            </Tabs>
+        </div>
+    );
+}
diff --git a/packages/docs-nextra/components/doenet.tsx b/packages/docs-nextra/components/doenet.tsx
index f778044e7..365b64b49 100644
--- a/packages/docs-nextra/components/doenet.tsx
+++ b/packages/docs-nextra/components/doenet.tsx
@@ -1,6 +1,27 @@
 import React from "react";
-import dynamic from "next/dynamic";
+import {
+    DoenetViewer as DoenetViewerOrig,
+    DoenetEditor as DoenetEditorOrig,
+} from "@doenet/doenetml-iframe";
+import "@doenet/virtual-keyboard/style.css";
 
-export const DoenetML = dynamic(() => import("./doenetInternal"), {
-    ssr: false,
-});
+/**
+ * Render DoenetML in an iframe so that its styling/state is completely isolated from the page.
+ */
+export function DoenetViewer({
+    source,
+}: React.PropsWithChildren<{ source: string }>) {
+    return <DoenetViewerOrig doenetML={source} />;
+}
+
+export function DoenetEditor({
+    source,
+    showFormatter = false,
+}: React.PropsWithChildren<{ source: string; showFormatter?: boolean }>) {
+    console.log("source for editor", JSON.stringify(source));
+    return (
+        <div className="doenet-editor-container">
+            <DoenetEditorOrig doenetML={source} showFormatter={showFormatter} />
+        </div>
+    );
+}
diff --git a/packages/docs-nextra/components/doenetInternal.tsx b/packages/docs-nextra/components/doenetInternal.tsx
deleted file mode 100644
index 93789240d..000000000
--- a/packages/docs-nextra/components/doenetInternal.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from "react";
-
-//import { renderDoenetToContainer } from "doenet-standalone-test";
-declare module window {
-    function renderDoenetToContainer(
-        domNode: HTMLElement,
-        content: string,
-    ): void;
-}
-
-export function DoenetInternal({ children }: React.PropsWithChildren<{}>) {
-    return (
-        <div
-            ref={(domNode) => {
-                if (domNode) {
-                    console.log("rendering the doenet");
-                    window.renderDoenetToContainer(
-                        domNode,
-                        String(children || ""),
-                    );
-                }
-            }}
-        ></div>
-    );
-}
-
-export default DoenetInternal;
diff --git a/packages/docs-nextra/components/doenetml-example.tsx b/packages/docs-nextra/components/doenetml-example.tsx
deleted file mode 100644
index 4985f4061..000000000
--- a/packages/docs-nextra/components/doenetml-example.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from "react";
-import { IframeDoenetML } from "./iframe-doenetml";
-import { Tabs } from "nextra/components";
-
-/**
- * Render DoenetML as an example in documentation.
- */
-export function DoenetMLExample({ children }: React.PropsWithChildren<{}>) {
-    if (typeof children !== "string") {
-        console.error(
-            "Error with DoenetML component. Expected a string child containing DoenetML source code, but found",
-            children,
-        );
-        return (
-            <div className="docs-error">
-                <em>Error with DoenetML component.</em> Expected a string child
-                containing DoenetML source code, but found {typeof children}.
-                Check the console for details
-            </div>
-        );
-    }
-    const source = children.trim();
-    return (
-        <div className="doenetml-example-container">
-            <Tabs items={["Example", "Source"]} defaultIndex={0}>
-                <Tabs.Tab>
-                    <div className="doenetml-example">
-                        <IframeDoenetML>{source}</IframeDoenetML>
-                    </div>
-                </Tabs.Tab>
-                <Tabs.Tab>
-                    <pre className="doenetml-source">{source}</pre>
-                </Tabs.Tab>
-            </Tabs>
-        </div>
-    );
-}
diff --git a/packages/docs-nextra/components/iframe-doenetml.tsx b/packages/docs-nextra/components/iframe-doenetml.tsx
deleted file mode 100644
index 7677965fc..000000000
--- a/packages/docs-nextra/components/iframe-doenetml.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from "react";
-import { DoenetViewer } from "@doenet/doenetml-iframe";
-import "@doenet/virtual-keyboard/style.css";
-
-/**
- * Render DoenetML in an iframe so that its styling/state is completely isolated from the page.
- */
-export function IframeDoenetML({ children }: React.PropsWithChildren<{}>) {
-    if (typeof children !== "string") {
-        console.error(
-            "Error with DoenetML component. Expected a string child containing DoenetML source code, but found",
-            children,
-        );
-        return (
-            <div className="docs-error">
-                <em>Error with DoenetML component.</em> Expected a string child
-                containing DoenetML source code, but found {typeof children}.
-                Check the console for details
-            </div>
-        );
-    }
-    return <DoenetViewer doenetML={children} />;
-}
diff --git a/packages/docs-nextra/components/index.ts b/packages/docs-nextra/components/index.ts
index b9c1ce464..cfcddad52 100644
--- a/packages/docs-nextra/components/index.ts
+++ b/packages/docs-nextra/components/index.ts
@@ -1,2 +1,3 @@
-export * from "./doenetml-example";
+export * from "./doenet-example";
 export * from "./props-display";
+export * from "./doenet";
diff --git a/packages/docs-nextra/next.config.mjs b/packages/docs-nextra/next.config.mjs
index 76671ee12..c2107d582 100644
--- a/packages/docs-nextra/next.config.mjs
+++ b/packages/docs-nextra/next.config.mjs
@@ -1,5 +1,10 @@
 import nextraConfig from "nextra";
-import { autoInsertAttrPropDescriptions } from "./dist/index.js";
+import {
+    autoInsertAttrPropDescriptions,
+    wrapDoenetExample,
+    wrapDoenetEditor,
+    wrapDoenetViewer,
+} from "./dist/index.js";
 import { getHighlighter, bundledLanguages, bundledThemes } from "shiki";
 import fs from "node:fs";
 
@@ -58,7 +63,12 @@ const withNextra = nextraConfig({
                 return await highlighter;
             },
         },
-        remarkPlugins: [autoInsertAttrPropDescriptions],
+        remarkPlugins: [
+            autoInsertAttrPropDescriptions,
+            wrapDoenetExample,
+            wrapDoenetEditor,
+            wrapDoenetViewer,
+        ],
         rehypePlugins: [
             /**
              * Add any data in `extraSearchData` to `structurizedData` so that it shows up in the search box.
diff --git a/packages/docs-nextra/pages/style.css b/packages/docs-nextra/pages/style.css
index 33ba85d58..970703b9e 100644
--- a/packages/docs-nextra/pages/style.css
+++ b/packages/docs-nextra/pages/style.css
@@ -1,8 +1,15 @@
-.doenetml-example-container {
-    border: 2px dashed black;
+.doenet-example-container {
+    border: 2px solid rgb(229, 231, 235);
     border-radius: 10px;
+    padding: 0px;
+    margin-top:1.5rem;
 }
 
+.doenet-editor-container {
+    margin-top:1.5rem;
+}
+
+
 .attr-table,
 .prop-table {
     margin-left: auto;
diff --git a/packages/docs-nextra/scripts/index.ts b/packages/docs-nextra/scripts/index.ts
index 0e992abda..42a93e6b9 100644
--- a/packages/docs-nextra/scripts/index.ts
+++ b/packages/docs-nextra/scripts/index.ts
@@ -1 +1,4 @@
 export * from "./auto-insert-attr-prop-descriptions";
+export * from "./wrap-doenet-editor";
+export * from "./wrap-doenet-example";
+export * from "./wrap-doenet-viewer";
diff --git a/packages/docs-nextra/scripts/wrap-doenet-editor.ts b/packages/docs-nextra/scripts/wrap-doenet-editor.ts
new file mode 100644
index 000000000..0f90beb81
--- /dev/null
+++ b/packages/docs-nextra/scripts/wrap-doenet-editor.ts
@@ -0,0 +1,47 @@
+import { visit } from "unist-util-visit";
+import { Plugin } from "unified";
+
+import { Root as MdastRoot } from "mdast";
+// Importing this automatically imports all the types from `mdast-util-mdx-jsx`.
+import "mdast-util-mdx-jsx";
+
+/**
+ * Wraps codeblocks of type `doenet-editor` with a JSX element that renders the editor with the output.
+ */
+export const wrapDoenetEditor: Plugin<void[], MdastRoot, MdastRoot> =
+    function () {
+        return (tree) => {
+            visit(tree, (node) => {
+                type MdxJsxFlowElement = typeof node & {
+                    type: "mdxJsxFlowElement";
+                };
+                if (node?.type !== "code") {
+                    return;
+                }
+                if (node.lang !== "doenet-editor") {
+                    return;
+                }
+
+                console.log(
+                    "value for wrapped editor",
+                    JSON.stringify(node.value),
+                );
+
+                const newNode: MdxJsxFlowElement = {
+                    type: "mdxJsxFlowElement",
+                    name: "DoenetEditor",
+                    attributes: [
+                        {
+                            type: "mdxJsxAttribute",
+                            name: "source",
+                            value: node.value,
+                        },
+                    ],
+                    children: [],
+                };
+
+                // Override the original node with the new one.
+                Object.assign(node, newNode);
+            });
+        };
+    };
diff --git a/packages/docs-nextra/scripts/wrap-doenet-example.ts b/packages/docs-nextra/scripts/wrap-doenet-example.ts
new file mode 100644
index 000000000..3c869552c
--- /dev/null
+++ b/packages/docs-nextra/scripts/wrap-doenet-example.ts
@@ -0,0 +1,45 @@
+import { visit } from "unist-util-visit";
+import { Plugin } from "unified";
+
+import { Root as MdastRoot } from "mdast";
+// Importing this automatically imports all the types from `mdast-util-mdx-jsx`.
+import "mdast-util-mdx-jsx";
+
+/**
+ * Wraps codeblocks of type `doenet-example` with a JSX element that renders the code and the output.
+ */
+export const wrapDoenetExample: Plugin<void[], MdastRoot, MdastRoot> =
+    function () {
+        return (tree) => {
+            visit(tree, (node) => {
+                type MdxJsxFlowElement = typeof node & {
+                    type: "mdxJsxFlowElement";
+                };
+                if (node?.type !== "code") {
+                    return;
+                }
+                if (node.lang !== "doenet-example") {
+                    return;
+                }
+
+                // Make sure to change `lang` away from `doenet-example` to avoid infinite recursion.
+                const origNode = { ...node, lang: "doenet" };
+
+                const newNode: MdxJsxFlowElement = {
+                    type: "mdxJsxFlowElement",
+                    name: "DoenetExample",
+                    attributes: [
+                        {
+                            type: "mdxJsxAttribute",
+                            name: "source",
+                            value: origNode.value,
+                        },
+                    ],
+                    children: [origNode],
+                };
+
+                // Override the original node with the new one.
+                Object.assign(node, newNode);
+            });
+        };
+    };
diff --git a/packages/docs-nextra/scripts/wrap-doenet-viewer.ts b/packages/docs-nextra/scripts/wrap-doenet-viewer.ts
new file mode 100644
index 000000000..c95d62c6b
--- /dev/null
+++ b/packages/docs-nextra/scripts/wrap-doenet-viewer.ts
@@ -0,0 +1,42 @@
+import { visit } from "unist-util-visit";
+import { Plugin } from "unified";
+
+import { Root as MdastRoot } from "mdast";
+// Importing this automatically imports all the types from `mdast-util-mdx-jsx`.
+import "mdast-util-mdx-jsx";
+
+/**
+ * Wraps codeblocks of type `doenet-editor` with a JSX element that renders the output.
+ */
+export const wrapDoenetViewer: Plugin<void[], MdastRoot, MdastRoot> =
+    function () {
+        return (tree) => {
+            visit(tree, (node) => {
+                type MdxJsxFlowElement = typeof node & {
+                    type: "mdxJsxFlowElement";
+                };
+                if (node?.type !== "code") {
+                    return;
+                }
+                if (node.lang !== "doenet-viewer") {
+                    return;
+                }
+
+                const newNode: MdxJsxFlowElement = {
+                    type: "mdxJsxFlowElement",
+                    name: "DoenetViewer",
+                    attributes: [
+                        {
+                            type: "mdxJsxAttribute",
+                            name: "source",
+                            value: node.value,
+                        },
+                    ],
+                    children: [],
+                };
+
+                // Override the original node with the new one.
+                Object.assign(node, newNode);
+            });
+        };
+    };
diff --git a/packages/doenetml-iframe/src/index.tsx b/packages/doenetml-iframe/src/index.tsx
index e4e558e6d..c8d0b757c 100644
--- a/packages/doenetml-iframe/src/index.tsx
+++ b/packages/doenetml-iframe/src/index.tsx
@@ -259,7 +259,7 @@ export function DoenetViewer({
                     boxSizing: "border-box",
                     overflow: "hidden",
                     border: "none",
-                    minHeight: 200,
+                    minHeight: 50,
                 }}
                 height={height}
             />
diff --git a/packages/doenetml/src/Viewer/PageViewer.jsx b/packages/doenetml/src/Viewer/PageViewer.jsx
index 1f7cf937e..c0f00b4a4 100644
--- a/packages/doenetml/src/Viewer/PageViewer.jsx
+++ b/packages/doenetml/src/Viewer/PageViewer.jsx
@@ -1392,7 +1392,7 @@ export function PageViewer({
     if (!coreCreated.current) {
         if (!documentRenderer) {
             noCoreWarning = (
-                <div style={{ backgroundColor: "lightCyan", padding: "10px" }}>
+                <div style={{ backgroundColor: "lightCyan" }}>
                     <p>Initializing....</p>
                 </div>
             );

From d8c309d8268577db874e9d4a2dfca781d25fc636 Mon Sep 17 00:00:00 2001
From: Duane Nykamp <nykamp@umn.edu>
Date: Thu, 1 Aug 2024 17:26:14 -0500
Subject: [PATCH 2/7] update documentation to use new nextra codeblocks

---
 .../reference/doenetML_components/abs.mdx     | 10 ++--
 .../reference/doenetML_components/alert.mdx   |  4 +-
 .../reference/doenetML_components/and.mdx     |  8 +--
 .../reference/doenetML_components/angle.mdx   |  2 +-
 .../animateFromSequence.mdx                   |  2 +-
 .../reference/doenetML_components/answer.mdx  |  2 +-
 .../reference/doenetML_components/aside.mdx   |  2 +-
 .../reference/doenetML_components/boolean.mdx | 58 +++++++++----------
 .../doenetML_components/componentIndex.mdx    |  2 +-
 .../doenetML_components/mathInput.mdx         |  8 +--
 .../pages/reference/essentialConcepts.mdx     |  4 +-
 .../intermediateTutorial/iT2-1-cartesian.mdx  | 24 ++++----
 .../intermediateTutorial/iT2-2-points.mdx     | 22 ++++---
 .../intermediateTutorial/iT2-3-lines.mdx      | 28 +++++----
 .../intermediateTutorial/iT2-4-properties.mdx | 31 +++++-----
 .../iT1-1-writing-mathematics.mdx             | 18 +++---
 .../introdTutorial/iT1-10-advice.mdx          | 12 ++--
 .../introdTutorial/iT1-2-creating-docs.mdx    |  2 +-
 .../iT1-3-variables-numbers.mdx               | 22 +++----
 .../introdTutorial/iT1-4-comparison-math.mdx  | 18 +++---
 .../introdTutorial/iT1-5-setup-blocks.mdx     |  6 +-
 .../introdTutorial/iT1-6-user-input.mdx       | 18 +++---
 .../introdTutorial/iT1-7-functions.mdx        | 22 +++----
 .../introdTutorial/iT1-8-domains.mdx          | 24 ++++----
 .../introdTutorial/iT1-9-sliders.mdx          | 16 +++--
 .../pages/tutorials/quickStart.mdx            | 18 +++---
 .../tutorials/quickStart/quickStart-1.mdx     |  7 +--
 .../tutorials/quickStart/quickStart-2.mdx     | 38 ++++--------
 28 files changed, 203 insertions(+), 225 deletions(-)

diff --git a/packages/docs-nextra/pages/reference/doenetML_components/abs.mdx b/packages/docs-nextra/pages/reference/doenetML_components/abs.mdx
index f8840be15..76f572011 100644
--- a/packages/docs-nextra/pages/reference/doenetML_components/abs.mdx
+++ b/packages/docs-nextra/pages/reference/doenetML_components/abs.mdx
@@ -1,4 +1,4 @@
-import { DoenetML} from "../../../components/doenet"
+import { DoenetViewer, DoenetEditor, DoenetExample } from "../../../components"
 
 # `<abs>`
 
@@ -18,7 +18,7 @@ The `<abs>` component has no attibutes or properties.
 
 <a id="math-ex"></a>
 ### Example: Render the absolute value of a math expression
-```html
+```doenet
 <m>|5 - 8| = <abs>5 - 8</abs></m>
 ```
 The `<abs>` component is used to render the absolute value of a math expression. Test code [here](https://www.doenet.org/portfolioeditor/_J1J2N530LyIvVWx64xB8V/_AgzWwqGV6Yy9DfqMyGlFm).
@@ -26,7 +26,7 @@ The `<abs>` component is used to render the absolute value of a math expression.
 
 <a id="mathInput-ex"></a>
 ### Example: Absolute value of `<mathInput>`
-```html 
+```doenet 
 <p>Type any number: <mathInput name="userN"/></p>
 <p><m>|$userN| = <abs>$userN</abs></m></p>
 ```
@@ -34,7 +34,7 @@ The `<abs>` component is used to render the absolute value of a named `<mathInpu
 
 <a id="numProps-ex"></a>
 ### Example: Absolute value of numerical properties
-```html {5}
+```doenet {5}
     <p>Move the point in the third quadrant.</p>
     <graph size="small" name="g1" newNameSpace>
         <point name="p1" styleNumber="2">(-5,-5)</point>
@@ -47,7 +47,7 @@ Children of the `<abs>` component can include references to `<mathInput>` values
 
 <a id="function-ex"></a>
 ### Example: Absolute value of a function
-```html {4}
+```doenet {4}
     <graph size="small" name="g2" newNameSpace>
        <function name="f">(1/4)x^2 - 4</function>
        <function styleNumber="2">
diff --git a/packages/docs-nextra/pages/reference/doenetML_components/alert.mdx b/packages/docs-nextra/pages/reference/doenetML_components/alert.mdx
index 18ff90417..e2a7d8aa6 100644
--- a/packages/docs-nextra/pages/reference/doenetML_components/alert.mdx
+++ b/packages/docs-nextra/pages/reference/doenetML_components/alert.mdx
@@ -1,4 +1,4 @@
-import { DoenetML} from "../../../components/doenet"
+import { DoenetViewer, DoenetEditor, DoenetExample } from "../../../components"
 
 # `<alert>`
 
@@ -10,7 +10,7 @@ The `<alert>` component has no attributes or properties.
 
 
 ### Example: Basic use
-```html
+```doenet
 <p>Take the <alert>right</alert> turn.</p>
 ```
 
diff --git a/packages/docs-nextra/pages/reference/doenetML_components/and.mdx b/packages/docs-nextra/pages/reference/doenetML_components/and.mdx
index 8bf372e83..97877032b 100644
--- a/packages/docs-nextra/pages/reference/doenetML_components/and.mdx
+++ b/packages/docs-nextra/pages/reference/doenetML_components/and.mdx
@@ -1,4 +1,4 @@
-import { DoenetML} from "../../../components/doenet"
+import { DoenetViewer, DoenetEditor, DoenetExample } from "../../../components"
 
 # `<and>`
 
@@ -15,7 +15,7 @@ The `<and>` component has no attributes or properties.
 
 <a id="boolean-ex"></a>
 ### Example: `<and>` in a `<boolean>`
-```html {10}
+```doenet {10}
 <p>Enter a number between 5 and 10, excluding 7:
   <mathInput name="n"/></p>
       
@@ -33,7 +33,7 @@ The `<and>` component functions as the boolean operator `and` or `&`, and checks
 
 <a id="award-ex"></a>
 ### Example: `<and>` in an `<award>`
-```html {18}
+```doenet {18}
 <p>Move the point to the intersection of the circle and the line in the 
 first quadrant. (Scroll down to check work.)</p>
       
@@ -69,7 +69,7 @@ An `<and>` component is used to construct a compound boolean from three referenc
 
 <a id="alternative-ex"></a>
 ### Example: An alternative to `<and>`
-```html {9}
+```doenet {9}
 <p>Enter a number between 5 and 10, excluding 7:
   <mathInput name="n"/></p>
       
diff --git a/packages/docs-nextra/pages/reference/doenetML_components/angle.mdx b/packages/docs-nextra/pages/reference/doenetML_components/angle.mdx
index b1e8f2466..01ae5de29 100644
--- a/packages/docs-nextra/pages/reference/doenetML_components/angle.mdx
+++ b/packages/docs-nextra/pages/reference/doenetML_components/angle.mdx
@@ -1,4 +1,4 @@
-import { DoenetML} from "../../../components/doenet"
+import { DoenetViewer, DoenetEditor, DoenetExample } from "../../../components"
 import { AttrDisplay, PropDisplay } from "../../../components"
 
 # `<angle>{:dn}`
diff --git a/packages/docs-nextra/pages/reference/doenetML_components/animateFromSequence.mdx b/packages/docs-nextra/pages/reference/doenetML_components/animateFromSequence.mdx
index 83895aa6d..75fb5b45c 100644
--- a/packages/docs-nextra/pages/reference/doenetML_components/animateFromSequence.mdx
+++ b/packages/docs-nextra/pages/reference/doenetML_components/animateFromSequence.mdx
@@ -1,4 +1,4 @@
-import { DoenetML} from "../../../components/doenet"
+import { DoenetViewer, DoenetEditor, DoenetExample } from "../../../components"
 
 <DoenetML>
 {`
diff --git a/packages/docs-nextra/pages/reference/doenetML_components/answer.mdx b/packages/docs-nextra/pages/reference/doenetML_components/answer.mdx
index f4df42996..548809a2f 100644
--- a/packages/docs-nextra/pages/reference/doenetML_components/answer.mdx
+++ b/packages/docs-nextra/pages/reference/doenetML_components/answer.mdx
@@ -1,4 +1,4 @@
-import { DoenetML} from "../../../components/doenet"
+import { DoenetViewer, DoenetEditor, DoenetExample } from "../../../components"
 
 # `<abs>`
 
diff --git a/packages/docs-nextra/pages/reference/doenetML_components/aside.mdx b/packages/docs-nextra/pages/reference/doenetML_components/aside.mdx
index f4df42996..548809a2f 100644
--- a/packages/docs-nextra/pages/reference/doenetML_components/aside.mdx
+++ b/packages/docs-nextra/pages/reference/doenetML_components/aside.mdx
@@ -1,4 +1,4 @@
-import { DoenetML} from "../../../components/doenet"
+import { DoenetViewer, DoenetEditor, DoenetExample } from "../../../components"
 
 # `<abs>`
 
diff --git a/packages/docs-nextra/pages/reference/doenetML_components/boolean.mdx b/packages/docs-nextra/pages/reference/doenetML_components/boolean.mdx
index 98c1cdaf1..c864aaa6c 100644
--- a/packages/docs-nextra/pages/reference/doenetML_components/boolean.mdx
+++ b/packages/docs-nextra/pages/reference/doenetML_components/boolean.mdx
@@ -1,4 +1,4 @@
-import { DoenetMLExample } from "../../../components"
+import { DoenetViewer, DoenetEditor, DoenetExample } from "../../../components"
 
 # `<boolean>`
 
@@ -9,7 +9,7 @@ The `<boolean>` component renders the boolean value of `true` or `false` of the
 
 ### Example: Check if an equation is `true` or `false`
 
-<DoenetMLExample>
+<DoenetExample>
 {`
 <codeEditor showResults resultsLocation="bottom">
 <p>The following equation is <alert><boolean>1 + 1 = $input</boolean></alert>.
@@ -18,13 +18,13 @@ The `<boolean>` component renders the boolean value of `true` or `false` of the
 <m>1 + 1 = </m> <mathInput name="input" prefill="3"/>
 </codeEditor>
 `}
-</DoenetMLExample>
+</DoenetExample>
 
 A `<boolean>` component is used to render whether an equation is `true` or `false` for a user-supplied response.
 
 ### Example: Boolean value of a geometric property
 
-<DoenetMLExample>
+<DoenetExample>
 {`
 <codeEditor showResults resultsLocation="bottom" height="700">
     <p><em>The slope of the line is greater than or equal to <m>1</m>:</em>
@@ -36,7 +36,7 @@ A `<boolean>` component is used to render whether an equation is `true` or `fals
     </graph>
 </codeEditor>
 `}
-</DoenetMLExample>
+</DoenetExample>
 
 
 A `<boolean>` component is used to render whether a statement regarding the geometric slope of a named `<line>` is `true` or `false`. Drag the point to adjust the slope of the line which in turn will affect the value of the `<boolean>`.
@@ -44,7 +44,7 @@ A `<boolean>` component is used to render whether a statement regarding the geom
 
 ### Example: Constructing compound booleans
 
-<DoenetMLExample>
+<DoenetExample>
 {`
 <codeEditor showResults resultsLocation="bottom" height="700">
 <p>Enter a number that is less than 100, greater than 20, and divisible by 3. <mathInput name="userNumber" /></p>
@@ -60,7 +60,7 @@ A `<boolean>` component is used to render whether a statement regarding the geom
 !</p>
 </codeEditor>
 `}
-</DoenetMLExample>
+</DoenetExample>
 
 References to `boolean` components can be combined with logical operators to create more complex boolean expressions.
 
@@ -83,7 +83,7 @@ References to `boolean` components can be combined with logical operators to cre
 
 ### Example: `symbolicEquality` attribute
 
-<DoenetMLExample>
+<DoenetExample>
 {`
 <codeEditor showResults resultsLocation="bottom">
     <p>Enter <m>x^2 + 2x + 1</m> exactly: <mathInput name="mi" /></p>
@@ -91,7 +91,7 @@ References to `boolean` components can be combined with logical operators to cre
     <p>Now, enter <m>(x + 1)^2</m> instead...</p>
 </codeEditor>
 `}
-</DoenetMLExample>
+</DoenetExample>
 
 Comparing two values with the `symbolicEquality` attribute
 switches the default comparison method to one which demands exact syntactical equality. Without this attribute, a value of `true` would be returned both for `x^2 + 2x + 1` as well as `(x + 1)^2`.
@@ -99,14 +99,14 @@ switches the default comparison method to one which demands exact syntactical eq
 
 ### Example: `expandOnCompare` attribute
 
-<DoenetMLExample>
+<DoenetExample>
 {`
 <codeEditor showResults resultsLocation="bottom">
     <p>Enter <m>(x + 1)^2</m>: <mathInput name="mi" /></p>
     <boolean expandOnCompare symbolicEquality>$mi = x^2 + 2x + 1</boolean>
 </codeEditor>
 `}
-</DoenetMLExample>
+</DoenetExample>
 
 Comparing two values with the `expandOnCompare` and
 `symbolicEquality` attributes allows expressions that are
@@ -115,7 +115,7 @@ equivalent after expanding to evaluate to `true`. It is a partial relaxation of
 
 ### Example: `simplifyOnCompare` attribute
 
-<DoenetMLExample>
+<DoenetExample>
 {`
 <codeEditor showResults resultsLocation="bottom">
     <p>Enter <m>x*x + x + x + 1</m>: <mathInput name="mi" />
@@ -123,7 +123,7 @@ equivalent after expanding to evaluate to `true`. It is a partial relaxation of
         <boolean simplifyOnCompare symbolicEquality>$mi = x^2 + 2x + 1</boolean>
 </codeEditor>
 `}
-</DoenetMLExample>
+</DoenetExample>
 
 Comparing two values with the `simplifyOnCompare` and
 `symbolicEquality` attributes allows expressions that are
@@ -131,7 +131,7 @@ equivalent after simplifying to evaluate to `true`. It is a partial relaxation o
 
 ### Example: `unorderedCompare` attribute
 
-<DoenetMLExample>
+<DoenetExample>
 {`
 <codeEditor showResults resultsLocation="bottom" height="600">
     <p>Enter <m>1,2,3,4,5</m> in that exact order: <mathInput name="mi" /></p>
@@ -141,14 +141,14 @@ equivalent after simplifying to evaluate to `true`. It is a partial relaxation o
     <p><boolean unorderedCompare>$mi2 = <mathList>1 2 3 4 5</mathList></boolean></p>
 </codeEditor>
 `}
-</DoenetMLExample>
+</DoenetExample>
 
 When multiple values are compared within a single `<boolean>`tag, the default behavior is to match the order of the listed values. If order is irrelevant, use the `unorderedCompare` attribute.
 
 
 ### Example: `matchByExactPositions` attribute
 
-<DoenetMLExample>
+<DoenetExample>
 {`
 <codeEditor showResults resultsLocation="bottom" height="600">
     <p>Enter <m>1,2,3</m> in that exact order:
@@ -159,13 +159,13 @@ When multiple values are compared within a single `<boolean>`tag, the default be
     <p>Now, observe what happens when you switch the order</p>
 </codeEditor>
 `}
-</DoenetMLExample>
+</DoenetExample>
 
 When multiple responses are evaluated by comparison with a vector of correct values inside a `<boolean>`, the `matchByExactPositions` attribute enforces a strict order onto the validation. Only correct values in the correct answer blanks will allow the `<boolean>` to evaluate to `true`.
 
 ### Example: `allowedErrorInNumbers` and `allowedErrorIsAbsolute` attributes
 
-<DoenetMLExample>
+<DoenetExample>
 {`
 <codeEditor showResults resultsLocation="bottom" height="600">
     <p>Enter a number within <m>10\%</m> of <m>100</m>: <mathInput name="mi1" /></p>
@@ -175,7 +175,7 @@ When multiple responses are evaluated by comparison with a vector of correct val
         <boolean allowedErrorInNumbers="0.1" allowedErrorIsAbsolute>$mi2 = 100</boolean>
 </codeEditor>
 `}
-</DoenetMLExample>
+</DoenetExample>
 
 The `allowedErrorInNumbers` attribute may be used to specify the acceptable error of an approximate response when comparing numerical values. By default, the error is specified as a fractional value.
 
@@ -184,7 +184,7 @@ To specify an allowed error with a specific numerical value (rather than as a fr
 
 ### Example: `caseInsensitiveMatch` attribute
 
-<DoenetMLExample>
+<DoenetExample>
 {`
 <codeEditor showResults resultsLocation="bottom" height="600">
     <p>Enter tTkLp: <textInput name="ti1" /></p>
@@ -194,7 +194,7 @@ To specify an allowed error with a specific numerical value (rather than as a fr
         <boolean caseInsensitiveMatch>tTkLp = $ti2</boolean>
 </codeEditor>
 `}
-</DoenetMLExample>
+</DoenetExample>
 
 Use the `caseInsensitiveMatch` attribute if capitalization
 is not relevant for comparison.
@@ -202,7 +202,7 @@ is not relevant for comparison.
 
 ### Example: `matchBlanks` attribute
 
-<DoenetMLExample>
+<DoenetExample>
 {`
 <codeEditor showResults resultsLocation="bottom" height="600">
 <p>Compare two expressions with blanks</p>
@@ -213,7 +213,7 @@ is not relevant for comparison.
 <p><boolean>$mi = /x</boolean></p>
 </codeEditor>
 `}
-</DoenetMLExample>
+</DoenetExample>
 
 Use the `matchBlanks` attribute to accurately compare two expressions containing blanks.
 
@@ -228,7 +228,7 @@ Use the `matchBlanks` attribute to accurately compare two expressions containing
 
 ### Example: `text` property
 
-<DoenetMLExample>
+<DoenetExample>
 {`
 <codeEditor showResults resultsLocation="bottom" height="500">
     <p>Enter "1" for true, not "1" for false:</p>
@@ -237,13 +237,13 @@ Use the `matchBlanks` attribute to accurately compare two expressions containing
     <p><c>text</c> = $bool.text</p>
 </codeEditor>
 `}
-</DoenetMLExample>
+</DoenetExample>
 
 The `text` property of a named `<boolean>` returns the
 value of "true" or "false" as a string.
 
 ### Example: `value` property
-<DoenetMLExample>
+<DoenetExample>
 {`
 <codeEditor showResults resultsLocation="bottom" height="500">
 <p>Enter "1" for true, not "1" for false:</p>
@@ -252,13 +252,13 @@ value of "true" or "false" as a string.
 <p><c>value</c> = $bool.value</p>
 </codeEditor>
 `}
-</DoenetMLExample>
+</DoenetExample>
 
 The `value` property of a named `<boolean>` returns its
 value of `true` or `false`.
 
 ### Example: Attributes as properties
-<DoenetMLExample>
+<DoenetExample>
 {`
 <codeEditor showResults resultsLocation="bottom" height="800">
     <math name="math1">x^2 + 2x + 1</math> = 
@@ -275,7 +275,7 @@ value of `true` or `false`.
     <p><c>matchByExactPositions</c> = $bool.matchByExactPositions</p>
 </codeEditor>
 `}
-</DoenetMLExample>
+</DoenetExample>
 
 All attributes of a `<boolean>` are also available
 as properties.
diff --git a/packages/docs-nextra/pages/reference/doenetML_components/componentIndex.mdx b/packages/docs-nextra/pages/reference/doenetML_components/componentIndex.mdx
index 4285d6de1..3c4550ca3 100644
--- a/packages/docs-nextra/pages/reference/doenetML_components/componentIndex.mdx
+++ b/packages/docs-nextra/pages/reference/doenetML_components/componentIndex.mdx
@@ -1,4 +1,4 @@
-import { DoenetML} from "../../../components/doenet"
+import { DoenetViewer, DoenetEditor, DoenetExample } from "../../../components"
 
 # Alphabetical Component Index
 
diff --git a/packages/docs-nextra/pages/reference/doenetML_components/mathInput.mdx b/packages/docs-nextra/pages/reference/doenetML_components/mathInput.mdx
index 168af5292..d92f77004 100644
--- a/packages/docs-nextra/pages/reference/doenetML_components/mathInput.mdx
+++ b/packages/docs-nextra/pages/reference/doenetML_components/mathInput.mdx
@@ -1,4 +1,4 @@
-import { DoenetML} from "../../../components/doenet"
+import { DoenetViewer, DoenetEditor, DoenetExample } from "../../../components"
 
 # `<mathInput/>`
 
@@ -41,7 +41,7 @@ In addition, a `<mathInput/>` cannot function if nested within any [Display Math
 
 <a id="name1-ex"></a>
 ### Example: Assign a name to user-input math expression
-```html {2}
+```doenet {2}
 <p>Type <c>x^2 + sqrt4 - 1/y</c>: 
   <mathInput name="userExpression"/></p>
 <p>You've typed: $userExpression</p>
@@ -50,7 +50,7 @@ A `<mathInput/>` renders an input field for storing and naming user-provided mat
 
 <a id="name2-ex"></a>
 ### Example: Do some math with user-input
-```html {3}
+```doenet {3}
 <p>Enter <c>pi/4</c>: <mathInput name="userAngle"/></p>
   <p>
     <math name="sinOfUserAngle">sin($userAngle)</math> = 
@@ -62,7 +62,7 @@ A named `<mathInput/>` can be referenced within a `<math>` for computations. Tes
 
 <a id="name3-ex"></a>
 ### Example: `<mathInput/>` with structured prefill
-```html {4}
+```doenet {4}
 <p>Simplify.</p>
   <math>2/10</math> = 
     <answer symbolicEquality="true">
diff --git a/packages/docs-nextra/pages/reference/essentialConcepts.mdx b/packages/docs-nextra/pages/reference/essentialConcepts.mdx
index ab8ad8db4..1a64821ff 100644
--- a/packages/docs-nextra/pages/reference/essentialConcepts.mdx
+++ b/packages/docs-nextra/pages/reference/essentialConcepts.mdx
@@ -11,7 +11,7 @@ DoenetML is a **markup language** much like HTML. When creating content in Doene
 
 * **Properties** - information stored internally relating to a component that may be accessed by referencing the component by name, followed by the name of the property. 
 
-```html
+```doenet
 <p>This is a graphical component: 
     <point name="p1">(1,2)</point>
 </p>
@@ -74,7 +74,7 @@ Components can communicate information between one another by means of reference
 
 When you need to access the value of the named component or one of its stored properties, use the notation `$componentName` to create a reference to the component itself, and use the notation `$componentName.propertyName` to create a reference to one of its properties. 
 
-```html
+```doenet
 <line name="line1" through="(1,2) (-7,5)"/>
 
 <p>Referencing the line component on a graph:</p>
diff --git a/packages/docs-nextra/pages/tutorials/intermediateTutorial/iT2-1-cartesian.mdx b/packages/docs-nextra/pages/tutorials/intermediateTutorial/iT2-1-cartesian.mdx
index e64725a29..7ea3519d6 100644
--- a/packages/docs-nextra/pages/tutorials/intermediateTutorial/iT2-1-cartesian.mdx
+++ b/packages/docs-nextra/pages/tutorials/intermediateTutorial/iT2-1-cartesian.mdx
@@ -1,11 +1,11 @@
-import { DoenetMLExample } from "../../../components"
+import { DoenetViewer, DoenetEditor, DoenetExample } from "../../../components"
 
 # Cartesian Grids and Function Graphs
 
 One of the most powerful features of DoenetML is the ability to create complicated graphics with a few lines of code. This section covers the basics of the `<graph>` tag and its attributes, and shows you how to graph a function $y = f(x)$. Later sections will demonstrate how to graph points, lines, polygons, circles, and other objects.
 
 By default, the following code creates the Cartesian grid, which goes from -10 to 10 in both the $x$ and $y$ directions. 
-```html
+```doenet
 <graph></graph>
 ```
 Test code [here](https://www.doenet.org/portfolioeditor/_J1J2N530LyIvVWx64xB8V/_AgzWwqGV6Yy9DfqMyGlFm).
@@ -22,8 +22,7 @@ DoenetML has attributes to adjust various features of a graph: the range of $x$
 
 Rather that listing out all of the possible attributes and values, documentation-style, you can learn these options by experimenting with the controls below. Try adjusting values and see how the graph changes. Doenet also provides you with the corresponding code to create the graph; you can copy and paste that code into your own documents.
 
-<DoenetMLExample>
-{`
+```doenet-example
  <tabular top="minor" bottom="minor">
     <row>
       <cell halign="right"><c>xmin=</c></cell>
@@ -88,8 +87,7 @@ Rather that listing out all of the possible attributes and values, documentation
     showNavigation="$showControls" 
     showBorder="$showBorder"
     horizontalAlign="$alignChoice"/>
-`}
-</DoenetMLExample>
+```
 
 Notice that the `<graph></graph>` code above includes `grid` (which is equivalent to `grid="true"`) when you check the grid box, but the tag does not include `grid="false"` if the grid is turned off. That's because `false` is the default value for `grid`; hence the attribute doesn't need to be included in that case. Similarly, the other attributes are suppressed if their default values are chosen:
 
@@ -101,14 +99,14 @@ Notice that the `<graph></graph>` code above includes `grid` (which is equivalen
 
 One additional attribute which was not demonstrated above is `identicalAxisScales`. By default, Deonet will always display a square graph. If you adjust the ranges of $x$ and $y$, that often means the axes are scaled differently. That's true in the following graph; $x$ ranges from -10 to 10, but $y$ only stretches from -4 to 4.
 
-```html
+```doenet
     <graph ymin="-4" ymax="4" showNavigation="false"/>
 ```
 
 
 By including the `identicalAxisScales` attribute (equivalent to `identicalAxisScales="true"`), we force Doenet to use the same scaling for both axes, which results in a rectangular graph.
 
-```html
+```doenet
     <graph ymin="-4" ymax="4" identicalAxisScales="true" showNavigation="false" />
 ```
 Test code [here](https://www.doenet.org/portfolioeditor/_J1J2N530LyIvVWx64xB8V/_AgzWwqGV6Yy9DfqMyGlFm).
@@ -117,7 +115,7 @@ Test code [here](https://www.doenet.org/portfolioeditor/_J1J2N530LyIvVWx64xB8V/_
 
 By default, the axes in Doenet graphs are unlabeled. You can adjust this behavior, but not with an attribute. Similar to the `<label>` tag in a slider, axis labels are provided with tags that are nested between `<graph>` and `</graph>`. (As mentioned in a previous section, they're known as children of the `<graph>` object.) The `<xLabel>` child specifies the label for the horizontal axes, and you can provide a label for the vertical axis with `<yLabel>`. As Either label can contain text, an `<m>` tag, or even a `<math>` object, as shown in the following example.
 
-```html {5,6}
+```doenet {5,6}
 <graph showNavigation="false"
        xmin="-1" xmax="8" 
        ymin="-2" ymax="10" >
@@ -131,7 +129,7 @@ Test code [here](https://www.doenet.org/portfolioeditor/_J1J2N530LyIvVWx64xB8V/_
 ### Graphing Functions
 Graphing a function in DoenetML is easy: simply create your graph, using whichever attributes and labels you want, and then include the function between the opening and closing tags. You can either define the function inside the graph, or define it elsewhere (say, in a `<setup>` block) and simply reference it within the graph using the `$functionName` notation. The example below shows both methods. Notice that Doenet also pays attention to the `domain` of a function when displaying its graph!
 
-```html {2-4,8,9}
+```doenet {2-4,8,9}
 <setup>
   <function name="f" domain="[-2pi,pi]">
     sin(x)-4
@@ -149,7 +147,7 @@ Test code [here](https://www.doenet.org/portfolioeditor/_J1J2N530LyIvVWx64xB8V/_
 
 If a function changes because of user interaction, e.g. a `<mathInput>` or `<slider>`, then its graph will automatically change as well. Try adjusting the value of $a$ below and notice the effects on the graph.
 
-```html
+```doenet
 <p>Graph of <m>y = (x-1)(x+1)(x-a)</m>.</p>
 
 <slider from="-3" to="3" name="a" step="1" initialValue="2" >
@@ -165,7 +163,7 @@ If a function changes because of user interaction, e.g. a `<mathInput>` or `<sli
 
 If you have multiple functions graphed at once, it can be confusing if they're all the same color and style. In DoenetML you can adjust styles by adding `styleNumber="n"` to a function, where $n$ values for default styles range from 1 to 6. (In fact, $n$ can be any natural number, but by default, the styles repeat once you get beyond 6, unless you have defined custom style numbers using the `<styleDefinition>` component. See the example below for default styles 1 to 3.
 
-```html
+```doenet
 <graph showNavigation="false">
     <function styleNumber="1">x^2+3</function>
     <function styleNumber="2">ln(x+2)</function>
@@ -174,7 +172,7 @@ If you have multiple functions graphed at once, it can be confusing if they're a
 ```
 The styles associated with each `styleNumber` vary in terms of color and width. Some styles will have solid lines, others might be dotted or dashed. The default styles are chosen to make sure each style is distinguishable from each other. (For example, the colors are chosen from a palatte of colors which still look different to most color-blind users.) In the following example, you can use the slider below to "scroll" through the different possible default style numbers.
 
-```html
+```doenet
 <slider from="1" to="6" step="1" name="styleSlider" width="200px">
     <label>stylenumber</label>
 </slider>
diff --git a/packages/docs-nextra/pages/tutorials/intermediateTutorial/iT2-2-points.mdx b/packages/docs-nextra/pages/tutorials/intermediateTutorial/iT2-2-points.mdx
index 8e1d44037..9c019e19d 100644
--- a/packages/docs-nextra/pages/tutorials/intermediateTutorial/iT2-2-points.mdx
+++ b/packages/docs-nextra/pages/tutorials/intermediateTutorial/iT2-2-points.mdx
@@ -1,4 +1,4 @@
-import { DoenetMLExample } from "../../../components"
+import { DoenetViewer, DoenetEditor, DoenetExample } from "../../../components"
 
 # All about Points
 
@@ -15,7 +15,7 @@ You can graph a point by including it inside of `<graph>` and `</graph>` tags. A
 
 The following example illustrates everything we've discussed so far about points. In the test editor, try changing some of the coordinates and clicking update to make sure you understand the definitions.
 
-```html
+```doenet
 <setup>
   <point name="A">(-8,2)</point>
 </setup>
@@ -34,7 +34,7 @@ By default, points can be dragged around, which updates their coordinates throug
 
 A key feature of DoenetML is that these kinds of updates are *bidrectional*, as demonstrated below. In the following example, you can use the `<mathInput/>` to adjust the coordinates of $P$, and the point will move. But if you drag $P$ to a new location in the graph, the contents of the `<mathInput/>` object will also update!
 
-```html
+```doenet
 <p>
   <m>P = </m> 
   <mathInput name="Pcoords" 
@@ -54,12 +54,12 @@ You can see another neat feature of Doenet in the above example, although it's m
 Similar to `<slider> `and `<graph>` objects, you can provide a label for a point with a nested `<label>` tag. Labels are placed above and to the right of a point, but you can adjust the location using the `labelPosition` attribute. The valid positions are: `top`, `left`, `right`, `bottom`, `upperleft`, `upperright`, `lowerleft`, and `lowerright`.
 
 Often, you want the name and label of your point to be the same. To avoid the hassle of typing nested tags,
-```html
+```doenet
      <point name="P" coords="(4,5)"><label>P</label></point>
 ```
 
 DoenetML provides a shortcut attribute called `labelIsName` which uses the name of the point as its label:
-```html
+```doenet
 <graph showNavigation="false">
   
   <point name="A" labelPosition="right" labelIsName>
@@ -82,8 +82,7 @@ Labels are printed in plain text, unless you use `<m>` or `<math>` inside of a `
 ### Style Points
 Earlier, you learned how to use `styleNumber` to distinguish between function graphs. The `styleNumber` attribute can be used with essentially any geometric object inside of a `<graph>` component, including points; when applied to a `<point>` object, `styleNumber` will not only change the color, but also the shape of a point. Here are points rendered with `styleNumber="n"` for $n \in \{1,2, \dots , 6\}$.
 
-<DoenetMLExample>
-{`
+```doenet-example
 <graph xmin="0" xmax="7" ymin="-1" ymax="1" 
            showNavigation="false" identicalAxisScales
            displayXAxis="false" displayYAxis="false" >  
@@ -97,8 +96,7 @@ Earlier, you learned how to use `styleNumber` to distinguish between function gr
       </map>
 
     </graph>
-`}
-</DoenetMLExample>
+```
 
 Before continuing, try adjusting the `styleNumber` of a point in one of the examples above. Click "update" and make sure the point's style changes.
 
@@ -107,7 +105,7 @@ DoenetML supports some basic arithmetic operations with points, essentially trea
 
 *Reminder: In DoenetML you can refer to an object before it is defined, as long as it is defined somewhere in your document. In the following code, the computations with $P$ and $Q$ are done at the beginning, even though those points are defined in the `<graph>` below.*
 
-```html
+```doenet
 <p><m>3\cdot P = 
   <math simplify>3*$P</math></m>
 </p>
@@ -136,7 +134,7 @@ Test code [here](https://www.doenet.org/portfolioeditor/_J1J2N530LyIvVWx64xB8V/_
 Notice that you can drag $P$ and $Q$ around in the graph, and everything else updates appropriately. However, you can't click on the midpoint $M$ and drag it around. That's because it's a *dependent* object; in other words, its coordinates depend on both $P$ and $Q$. Changing $M$ would require changing $P$, or $Q$, or both. Since Doenet isn't sure which of those three options you want, it doesn't let you move $M$ at all.
 
 Now go back and add the attribute `fixed` to the definition of $Q$,
-```html
+```doenet
 <point name="Q" coords="(6,3)" labelisName fixed/>
 ```
 
@@ -144,4 +142,4 @@ and then click "update." As you can guess, the `fixed` attribute tells Doenet th
 
 ### Next Steps
 In the next section, we'll move up from points to line segments, rays, and lines. Then we'll learn about so-called "properties" in Doenet, before moving on to more complicated shapes like polygons.
-import { DoenetMLExample } from "../../../components"
+import { DoenetExample } from "../../../components"
diff --git a/packages/docs-nextra/pages/tutorials/intermediateTutorial/iT2-3-lines.mdx b/packages/docs-nextra/pages/tutorials/intermediateTutorial/iT2-3-lines.mdx
index 35a847f03..d3e9cbbd6 100644
--- a/packages/docs-nextra/pages/tutorials/intermediateTutorial/iT2-3-lines.mdx
+++ b/packages/docs-nextra/pages/tutorials/intermediateTutorial/iT2-3-lines.mdx
@@ -1,4 +1,4 @@
-import { DoenetMLExample } from "../../../components"
+import { DoenetViewer, DoenetEditor, DoenetExample } from "../../../components"
 
 # Lines, Segments and Rays
 
@@ -16,19 +16,19 @@ In Algebra, students learn that lines can be described or determined in a number
 All of these approaches are possible in DoenetML as well, using various attributes of the `<line>` tag.
 
 * Two points $(a,b)$ and $(c,d)$ can be specified using the `through` attribute:
-    ```html
+    ```doenet
         <line through="(a,b) (c,d)" />
     ```
 
     Notice that the points are given in a list separated by a *space*, not a comma.
 
 * Similarly, you can use the `through` and `slope` attributes to define a line through a point with a certain slope:
-    ```html
+    ```doenet
         <line through="(a,b)" slope="m" />
     ```
 
 * Finally, you can define a line via an equation, using the (aptly named!) `equation` attribute:
-    ```html
+    ```doenet
         <line equation="a x + b y = c" />
     ```
 
@@ -39,7 +39,7 @@ by graphing the function $f(x) = mx + b$. This approach is more general, though;
 
 All three methods are illustrated in the example below. Try adjusting the attributes and clicking "update," to make sure you know how to use each type of definition. Notice how, similar to the `<point>` tag, you can adjust the appearances of lines using styleNumber.
 
-```html
+```doenet
 <graph showNavigation="false">
 
   <line through="(-8,8) (9,6)" />
@@ -54,7 +54,7 @@ Test code [here](https://www.doenet.org/portfolioeditor/_J1J2N530LyIvVWx64xB8V/_
 
 Also similar to `<point>`, you can define a line outside of a `<graph>` object, either in a `<setup>` block or in your regular text. If you define a line (or reference it using `$lineName`) within regular text, Doenet will print an equation of the line.
 
-```html
+```doenet
 <setup>
   <line name="line1" equation="y=6-x" />
 </setup>
@@ -75,7 +75,7 @@ Finally, and again like points, lines can be dragged around in Doenet. Try dragg
 
 In geometry, we frequently want to define a line $l$ which goes through a point $P$ and is either parallel or perpendicular to some other line $k$. For these applications, the `parallelTo` and `perpendicularTo` attributes can be useful, as shown in the following example.
 
-```html
+```doenet
 <graph>
   <line name="k">y = 3x + 4</line>
   <line through="(1,2)" parallelTo="$k"  styleNumber="2"/>
@@ -86,14 +86,14 @@ Test code [here](https://www.doenet.org/portfolioeditor/_J1J2N530LyIvVWx64xB8V/_
 
 ### Line Segments and Rays
 The ray $\overrightarrow{PQ}$ starts at its endpoint $P$ (sometimes called its vertex) and goes through $Q$. DoenetML has a `<ray>` tag with attributes that match those terms:
-```html
+```doenet
     <ray endpoint="(a,b)" through="(c,d)" />
 ```
 
 (In geometry we sometimes define rays by giving an endpoint and a direction vector. That approach is also possible in DoenetML... but we haven't covered vectors yet! If you're interested, you can check the documentation for `<ray>`, or wait until the tutorial section which covers `<vector>`.)
 
 Meanwhile, a line segment is defined in terms of its two endpoints:
-```html
+```doenet
     <lineSegment endpoints="(a,b) (c,d)" />
 ```
 
@@ -101,7 +101,7 @@ Similar to defining a `<line>` through two points, the endpoints are separated b
 
 In the example below, you can adjust $\overrightarrow{PQ}$ and $\overline{RS}$ by dragging the four labeled points. You can also drag the ray or line segments themselves, and the labeled points will translate accordingly.
 
-```html
+```doenet
 <graph showNavigation="false">
   <point name="P" coords="(-8,8)"  labelIsName />
   <point name="Q" coords="(6,4)"   labelIsName />
@@ -118,8 +118,7 @@ Test code [here](https://www.doenet.org/portfolioeditor/_J1J2N530LyIvVWx64xB8V/_
 ### Stylish Segments
 As with lines, you can change how rays and segments are displayed on screen using the `styleNumber` attributes. You've already seen how points are displayed with each `styleNumber`. Below you can see points combined with a line segment.
 
-<DoenetMLExample>
-{`
+```doenet-example
 <graph xmin="0" xmax="7.5" ymin="-1" ymax="2" 
            showNavigation="false" identicalAxisScales
            displayXAxis="false" displayYAxis="false" >  
@@ -135,8 +134,7 @@ As with lines, you can change how rays and segments are displayed on screen usin
       </map>
 
     </graph>
-`}
-</DoenetMLExample>
+```
 
 ### Geometry Example
 Now that we have points, segments, and rays, we can use DoenetML to create an interactive example which shows the medians and centroid of $\triangle{ABC}$ for any points $A$, $B$, and $C$. The code below does the following:
@@ -153,7 +151,7 @@ Now that we have points, segments, and rays, we can use DoenetML to create an in
 
     (Note, currently, `<intersection>` works with lines, line segments, rays, polygons and circles.)
 
-```html
+```doenet
 <graph showNavigation="false" displayXAxis="false" displayYAxis="false">
   <point name="A" coords="(-6,6)" labelIsName />
   <point name="B" coords="(7,4)"  labelIsName />
diff --git a/packages/docs-nextra/pages/tutorials/intermediateTutorial/iT2-4-properties.mdx b/packages/docs-nextra/pages/tutorials/intermediateTutorial/iT2-4-properties.mdx
index c2637fa94..ea3ff48dd 100644
--- a/packages/docs-nextra/pages/tutorials/intermediateTutorial/iT2-4-properties.mdx
+++ b/packages/docs-nextra/pages/tutorials/intermediateTutorial/iT2-4-properties.mdx
@@ -1,4 +1,4 @@
-import { DoenetML} from "../../../components/doenet"
+import { DoenetViewer, DoenetEditor, DoenetExample } from "../../../components"
 
 # Properties and Lists
 
@@ -6,25 +6,25 @@ import { DoenetML} from "../../../components/doenet"
 
 Throughout this tutorial we've used "attributes" to adjust the behavior of components in DoenetML. Often you don't want to change the value of an attribute, though; you just want to know what that value is. You can do this with **properties** in DoenetML. The general syntax to retrieve the value of a property in DoenetML is:
 
-```html
+```doenet
      $objectName.propertyName
 ```
 
 For example, if you have a line named `PQ`, you can access its `slope` by typing the following in your code:
-```html
+```doenet
      $PQ.slope
 ```
 
 You might recall that `slope `is one of the attributes of `<line>`. It's often the case that the values of attributes can be accessed as properties. For example, if you define a line as
-```html
+```doenet
      <line name="PQ" through="(0,1)" slope="2"/>
 ```
 then, unsurprisingly, `$PQ.slope` is $2$. However, even if you define the same line using different attributes, such as
-```html
+```doenet
      <line name="PQ" through="(-1,1) (1,3)"/>
 ```
 or
-```html
+```doenet
      <line name="PQ" equation="2x-y=-1"/>,
 ```
 Doenet will still calculate the slope of $\overset{\longleftrightarrow}{PQ}$ and set `$PQ.slope` equal to $2$. Furthermore, if the line changes because of some user interaction, the value of `$PQ.slope` will be updated.
@@ -35,7 +35,7 @@ The documentation page for each DoenetML component, as found in either the [Alph
 
 As a basic example, the following code uses the $x$ and $y$-coordinates of points $P$ and $Q$ to compute the length of $\overline{PQ}$, via the distance formula. However, it turns out DoenetML already computes that distance; we can access it using the `length` property of the line segment.
 
-```html
+```doenet
 <graph showNavigation="false" size="small">
 
   <point name="P" x="-8" y="-2" />
@@ -67,7 +67,7 @@ Throughout the rest of this tutorial, you'll sometimes see attribute names used
 
 ### Array Notation
 The `<mathList>` tag was briefly introduced in an earlier section. You might recall this is a space-separated list of `<math>` objects:
-```html
+```doenet
 <mathList>$object1 $object2 $object3</mathList>
 ```
 
@@ -77,7 +77,7 @@ Later in this tutorial we'll cover sequences and other lists of objects in Doene
 
 * To refer to the $n^{th}$ object in a list, use the following "array" notation: First, enter the name of the component, followed by the type of object or property that is being accessed, followed by square brackets enclosing the index value desired. The following example shows this notation for three different types of lists; `<mathList>`, `<textList>`, and `<booleanList>`.
 
-```html {2,5,8} 
+```doenet {2,5,8} 
 <p>A mathlist: <mathList name="ml">x xy pi^2 sqrt(2)</mathList></p>
 <p>The third "math" in the <tag>mathList</tag> is: $ml.maths[3]</p>
 
@@ -99,7 +99,8 @@ The following code demonstrates the use of array notation and properties with gr
 
 Below the graph, you'll find references to the `endpoints` property of both line segements, as well as individual references to specific data from the `endpoints` property list (see lines 10-11).
 
-```html {5, 10-11}
+
+<DoenetEditor source ={`
 <graph size="small">
   <lineSegment name= "line1" endpoints="(-8,-8) (-8,8)" />
  
@@ -111,9 +112,9 @@ Below the graph, you'll find references to the `endpoints` property of both line
 <p>Endpoints of <c>line2</c>: $line2.endpoints</p>
 <p>First endpoint of <c>line2</c>: $line2.endpoints[1]</p>
 <p>Second endpoint of <c>line2</c>, first element (x): $line2.endpoints[2][1]</p>
-```
-<DoenetML>
-{`
+`} />
+
+```doenet-editor
 <graph size="small">
   <lineSegment name= "line1" endpoints="(-8,-8) (-8,8)" />
  
@@ -125,8 +126,8 @@ Below the graph, you'll find references to the `endpoints` property of both line
 <p>Endpoints of <c>line2</c>: $line2.endpoints</p>
 <p>First endpoint of <c>line2</c>: $line2.endpoints[1]</p>
 <p>Second endpoint of <c>line2</c>, first element (x): $line2.endpoints[2][1]</p>
-`}
-</DoenetML>
+```
+
 
 Test code [here](https://www.doenet.org/portfolioeditor/_J1J2N530LyIvVWx64xB8V/_AgzWwqGV6Yy9DfqMyGlFm).
 
diff --git a/packages/docs-nextra/pages/tutorials/introdTutorial/iT1-1-writing-mathematics.mdx b/packages/docs-nextra/pages/tutorials/introdTutorial/iT1-1-writing-mathematics.mdx
index 9ee9ebd5b..e5e340523 100644
--- a/packages/docs-nextra/pages/tutorials/introdTutorial/iT1-1-writing-mathematics.mdx
+++ b/packages/docs-nextra/pages/tutorials/introdTutorial/iT1-1-writing-mathematics.mdx
@@ -1,4 +1,4 @@
-import { DoenetML} from "../../../components/doenet"
+import { DoenetViewer, DoenetEditor, DoenetExample } from "../../../components"
 
 # Writing Mathematics with DoenetML
 
@@ -20,7 +20,7 @@ but you have no control over where the line breaks occur, how far the bullet poi
 If you've created a webpage with HTML, you'll feel right at home writing in DoenetML. (And if you haven't, don't worry -- there's not too much to learn!) Content is always contained between opening and closing tags. Just like HTML, tags are denoted with angle brackets, < and >. The closing tag includes an extra slash.
 
 For example, the following text would create a new paragraph:
-```html
+```doenet
      <p>Write the paragraph text here!</p>
 ```
 Test code [here](https://www.doenet.org/portfolioeditor/_J1J2N530LyIvVWx64xB8V/_AgzWwqGV6Yy9DfqMyGlFm).
@@ -31,7 +31,7 @@ Below this paragraph, you'll see an example with one line of code using `<p>` an
 
 In your test editor, you can click on the blank line at the bottom and add a new paragraph, surrounded by `<p>` and `</p>`. Then click "update" to see the results. If you get an error, make sure you've included both the opening and ending tags,
 
-```html
+```doenet
 <p>This is a short paragraph, which includes some <em>emphasized</em> text. Similar to other markup languages, DoenetML ignores    extra    spaces
 
 and blank lines.</p>
@@ -48,7 +48,7 @@ Similar to HTML, tags in DoenetML are **case-insensitive**. In other words, you
 
 In DoenetML, mathematical expressions are denoted with the `<m>` tag, and are rendered with [MathJax](https://www.mathjax.org/). If an expression or equation is important enough to be centered on a line by itself, use the `<me>` tag instead.
 
-```html
+```doenet
 <p>Consider the function</p>
 
 <me>f(x) = x^2-3x-10.</me>
@@ -59,7 +59,7 @@ Test code [here](https://www.doenet.org/portfolioeditor/_J1J2N530LyIvVWx64xB8V/_
 
 For those familiar with LaTeX, the difference between `<m>` and `<me>` is essentially the same as "inline" and "display" mode in LaTeX. Speaking of LaTeX: you can use nearly any valid LaTeX code in `<m>` and `<me>` tags. (You can see the full list of [commands supported by MathJax](https://docs.mathjax.org/en/latest/input/tex/macros/index.html); although you can't embed full text environments in an `<m>`, essentially any code you would use to typeset mathematics should work.) See below for some examples.
 
-```html
+```doenet
 <me>x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}</me>
 
 <me>F(x) = \int_a^x f(t) \, dt</me>
@@ -70,7 +70,7 @@ Test code [here](https://www.doenet.org/portfolioeditor/_J1J2N530LyIvVWx64xB8V/_
 
 The `<m>` and `<me>` tags do not recognize strings such as "sqrt" or "sin" as mathematical functions. To render those functions correctly, use the appropriate LaTeX code:
 
-```html
+```doenet
 <me>\sqrt{a^2+b^2}</me>
 
 <me>\sin{(a+b)}</me>
@@ -83,7 +83,7 @@ A full LaTeX introduction is beyond the scope of this tutorial. If you're not fa
 
 Many of the basic HTML tags for formatting text carry over to DoenetML. The code sample below demonstrates paragraphs, lists, and alert (bold) text.
 
-```html
+```doenet
 <p>You've already seen paragraphs and <em>emphasized</em> text.  Although DoenetML does not have a tag for bold text, it does have a tag for <alert>alert text</alert>.</p>
   
 <p>Lists come in two flavors: ordered and unordered.</p>
@@ -107,12 +107,12 @@ Test code [here](https://www.doenet.org/portfolioeditor/_J1J2N530LyIvVWx64xB8V/_
 
 ### Comments
 Occasionally you might want to "comment out" part of your document, i.e. prevent it from being processed by Doenet and displayed on screen. (Perhaps something isn't working correctly, or you're working on a long document and only want a portion of it to render on screen.). DoenetML uses the same comment tag as HTML; anything between `<!-- and -->` will be ignored:
-```html
+```doenet
     <!-- this code will be ignored by Doenet -->
 ```
 
 You can see a DoenetML comment in action in the following sample:
-```html
+```doenet
 <!-- <p>This paragraph will be ignored by Doenet</p> -->
 
 <p>This text will be displayed.</p>
diff --git a/packages/docs-nextra/pages/tutorials/introdTutorial/iT1-10-advice.mdx b/packages/docs-nextra/pages/tutorials/introdTutorial/iT1-10-advice.mdx
index df40b477d..fc2e4c5ec 100644
--- a/packages/docs-nextra/pages/tutorials/introdTutorial/iT1-10-advice.mdx
+++ b/packages/docs-nextra/pages/tutorials/introdTutorial/iT1-10-advice.mdx
@@ -1,4 +1,4 @@
-import { DoenetML} from "../../../components/doenet"
+import { DoenetViewer, DoenetEditor, DoenetExample } from "../../../components"
 
 # Doenet Authoring Advice
 
@@ -11,14 +11,14 @@ Doenet's general philosphy is to crash with an error message as rarely as possib
 At a basic level, this often means Doenet objects have default values chosen for their options. In some languages, for example, you can't create a slider without specifying the range of values and the step size. In DoenetML, you can omit one or more of those options from a `<slider/>` tag, and Doenet will still display a slider. It just might not be the one you originally intended!
 
 More generally, there are some fairly serious errors that would immediately cause a crash with other languages, but not Doenet -- although the results may look odd at times! Consider the following short example,
-```html
+```doenet
 <math>$x^2</math>
 ```
  Here, we define a `<math>` object whose value is the square of `$x`... except $x$ isn't defined in the document! As seen in an earlier example, the result is $_^2$, which is Doenet's way of saying "there's nothing to square here, so I'll just render a blank/unknown value raised to the second power."
 
 Along the same lines: if you give Doenet an invalid attribute value, it will generally just ignore the attribute instead of crashing with an error message. In the following code, we made a typo and used a curly bracket in the domain, writing $[0,2\}$ instead of $[0,2]$. Notice that Doenet still defines the function, and does not restrict its domain at all; $f(-1)$ and $f(3)$ are both defined.
 
-```html
+```doenet
 <function name="f" domain="[0,2}">
   x^2
 </function>
@@ -63,13 +63,13 @@ There are relatively few reasons why a Doenet document will fail to load, and di
 
 In DoenetML there are two common ways to modify the definitions or behavior of components. You're already familiar with attributes, which are included in the opening tag of a component, e.g.
 
-```html
+```doenet
      <function name="f" domain="[0,1]">3x-1</function>.
 ```
 
 Children are essentially nested tags. For example, the label in a slider has to be provided inside a `<label>` tag, like this:
 
-```html
+```doenet
      <slider>
 
        <label>label text</label>
@@ -85,7 +85,7 @@ So far you've usually worked with attributes, but as you continue on through thi
 Up until now, we've made a point of mentioning when a tag is self-closing. For those who are new to HTML-style markeup languages (including DoenetML), it's worth saying a few extra words about these tags before you continue on to the more advanced sections of this tutorial.
 
 * Self-closing is an option for some DoenetML tags, but is never *required*. It might be faster to write `<mathInput name="x"/>`, but
-    ```html
+    ```doenet
      <mathInput name="x"><mathInput>
     ```
 
diff --git a/packages/docs-nextra/pages/tutorials/introdTutorial/iT1-2-creating-docs.mdx b/packages/docs-nextra/pages/tutorials/introdTutorial/iT1-2-creating-docs.mdx
index 2745f7768..f59e3f7af 100644
--- a/packages/docs-nextra/pages/tutorials/introdTutorial/iT1-2-creating-docs.mdx
+++ b/packages/docs-nextra/pages/tutorials/introdTutorial/iT1-2-creating-docs.mdx
@@ -1,4 +1,4 @@
-import { DoenetML} from "../../../components/doenet"
+import { DoenetViewer, DoenetEditor, DoenetExample } from "../../../components"
 
 # Creating Your own Doenet Documents
 
diff --git a/packages/docs-nextra/pages/tutorials/introdTutorial/iT1-3-variables-numbers.mdx b/packages/docs-nextra/pages/tutorials/introdTutorial/iT1-3-variables-numbers.mdx
index 040266063..23517a7c5 100644
--- a/packages/docs-nextra/pages/tutorials/introdTutorial/iT1-3-variables-numbers.mdx
+++ b/packages/docs-nextra/pages/tutorials/introdTutorial/iT1-3-variables-numbers.mdx
@@ -1,4 +1,4 @@
-import { DoenetML} from "../../../components/doenet"
+import { DoenetViewer, DoenetEditor, DoenetExample } from "../../../components"
 
 # Variables, Numbers, Arithmetic, and Algebra
 
@@ -9,7 +9,7 @@ This section will also introduce attributes, which are an important way to defin
 ### The `<math>` Tag
 In DoenetML, `<math>` denotes a mathematical expression that can be rendered on screen and used in computations.
 
-```html
+```doenet
 <p>
   <math>1-2</math>
 </p>
@@ -26,7 +26,7 @@ By default, DoenetML does not perform any simplifications on the contents of a `
 
 In the following examples, we've added `simplify="true"` to each opening `<math>` tag. Notice how Doenet now simplifies each expression, by computing $1 - 2 = -1$ and $\sqrt{3^2 + 4^2} = 5$.
 
-```html
+```doenet
 <p>
   <math simplify="true">1-2</math>
 </p>
@@ -41,7 +41,7 @@ Test code [here](https://www.doenet.org/portfolioeditor/_J1J2N530LyIvVWx64xB8V/_
 
 **Pro tip #2:** the `simplify` attribute has other possible settings, such as `simplify="numbers"`, which will combine constants but not group other variables together. See the following code sample for an example.
 
-```html
+```doenet
 <p> This expression will be fully simplified:
   <math simplify>3x^2 - 2x^2 + 3x + 5x + 7 + 9</math>
 </p>
@@ -54,7 +54,7 @@ Test code [here](https://www.doenet.org/portfolioeditor/_J1J2N530LyIvVWx64xB8V/_
 
 ### The name Attribute
 Perhaps the most commonly used attribute in DoenetML is `name`, which allows you to create a reference to an object (which could be *any* component, such as a `<p>`, an `<ol>`, or a `<math>`) so that you can refer to it later. (If you have a programing background, think: creating variables.) For example, the following code essentially amounts to "Let $x = 3$" in DoenetML:
-```html
+```doenet
 <math name="x">3</math>
 ```
 
@@ -62,7 +62,7 @@ Once we've defined a reference for $x$ with the `name` attribute, we can refer t
 
 When you want to refer to an object (or an object property, which we will discuss in later tutorials), use the `$` symbol, followed by the `name` of the object. The following example illustrates one common use for an object reference: repeating back to the user a value they've entered in a `<textInput/>` component.
 
-```html
+```doenet
 <p>What is your name? <textInput name="userName"/></p>
 
 <p>Hello, $userName!</p>
@@ -71,7 +71,7 @@ Test code [here](https://www.doenet.org/portfolioeditor/_J1J2N530LyIvVWx64xB8V/_
 
 Here is another example, where the original `<math>` component is used to define a value, and then later referenced to perform an algebraic substitution.
 
-```html
+```doenet
 <p>Define the value of <m>x</m> here:
   <math name="x">3</math>
 </p>
@@ -86,13 +86,13 @@ Here is another example, where the original `<math>` component is used to define
 Test code [here](https://www.doenet.org/portfolioeditor/_J1J2N530LyIvVWx64xB8V/_AgzWwqGV6Yy9DfqMyGlFm).
 
 Did you notice that $x$ was used to define a new `<math>` object named $y$, which was later used to create a third `<math>`, which was the simplified value of $y$? We could have also included the simplify attribute when defining $y$:
-```html
+```doenet
      <math name="y" simplify>1+$x+$x^2+$x^3</math>
 ```
 
 You can use the `$` symbol to refer to any number of Doenet objects. The following example uses multiple references to solve the equation $a x - b = 10$. In the test editor, try changing the values of $a$ and $b$ and click update to solve the new equation.
 
-```html
+```doenet
 <p>Define <m>a</m> and <m>b</m> :
   <math name="a">3</math>, 
   <math name="b">8</math>
@@ -105,7 +105,7 @@ Test code [here](https://www.doenet.org/portfolioeditor/_J1J2N530LyIvVWx64xB8V/_
 ### The `<number>` Tag
 The `<math>` tag can be used for symbolic or numerical expressions. If you just want to store a numerical value, you can use the `<number>` instead. Although you can use arithmetic and functions to define a `<number>`, only the resulting value will be stored. Compare how Doenet treats the expression $\sin(\frac{\pi}{4})$ inside `<math>` or `<number>` tags.
 
-```html
+```doenet
 <p><math>sin(pi/4)</math></p>
 
 <p><number>sin(pi/4)</number></p>  
@@ -114,7 +114,7 @@ Test code [here](https://www.doenet.org/portfolioeditor/_J1J2N530LyIvVWx64xB8V/_
 
 Unlike the contents of a `<math>` object, the value of a `<number>` is rendered as plain text, instead of using [MathJax](https://www.mathjax.org/). The difference can be visually jarring if it's next to other rendered mathematics or numbers. In some cases you might want to wrap your `<number>` between `<m>` and `</m>`:
 
-```html
+```doenet
 <p><math>0.707</math></p>
 
 <p><m>\sin(\pi/4)=</m> <number>sin(pi/4)</number></p>  
diff --git a/packages/docs-nextra/pages/tutorials/introdTutorial/iT1-4-comparison-math.mdx b/packages/docs-nextra/pages/tutorials/introdTutorial/iT1-4-comparison-math.mdx
index 411aa7a60..bde884dc0 100644
--- a/packages/docs-nextra/pages/tutorials/introdTutorial/iT1-4-comparison-math.mdx
+++ b/packages/docs-nextra/pages/tutorials/introdTutorial/iT1-4-comparison-math.mdx
@@ -1,4 +1,4 @@
-import { DoenetML} from "../../../components/doenet"
+import { DoenetViewer, DoenetEditor, DoenetExample } from "../../../components"
 
 # A Comparison of Mathematics Tags
 
@@ -15,7 +15,7 @@ To start, here's a review of the two tags:
 In practice, the behavior of `<m>` and `<math>` can look very similar. Consider the following example.
 
 
-```html {5,11}
+```doenet {5,11}
 <p>Define two numbers:
   <m name="a">1</m>,
   <m name="b">2</m></p>
@@ -34,7 +34,7 @@ Although using `<m> `or `<math>` results in the same display: there's a crucial,
 
 To drive this point home: the following code adds simplify to the definition of `xySum`, and also uses the result in a subsequent calculation.
 
-```html {5-6}
+```doenet {5-6}
 <p>Define two numbers:
   <math name="x">1</math>,
   <math name="y">2</math></p>
@@ -46,7 +46,7 @@ Test code [here](https://www.doenet.org/portfolioeditor/_J1J2N530LyIvVWx64xB8V/_
 
 Those calculations would not be possible with the `<m>` tag. In the following code, `$abSum^2` results in $_^2$, which is Doenet-speak for "the square of some unknown value." Because `$abSum` is a string of characters, not a number or mathematical expression, Doenet does not know how to square it.
 
-```html {5-6}
+```doenet {5-6}
 <p>Define two numbers:
   <m name="a">1</m>,
   <m name="b">2</m></p>
@@ -64,7 +64,7 @@ Sometimes it seems like `<m>` will suffice for your purposes, but it's worth pla
 
 Consider the following example, which uses three numbers to create and solve a quadratic equation. (Later in this tutorial you'll learn how to let the user provide these coefficients; for now we'll just define them in the code.)
 
-```html {7}
+```doenet {7}
 <p>Define the coefficients for a quadratic function here: 
   <math name="a">2</math>,
   <math name="b">8</math>,
@@ -82,7 +82,7 @@ Everything seems to be working! We've used `<m>` tags to display the quadratic e
 
 As it turns out, however, there's a subtle issue with our code. Check out what happens with the `<m>` tag with different coefficients:
 
-```html {7}
+```doenet {7}
 <p>Define the coefficients for a quadratic function here: 
   <math name="a">1</math>,
   <math name="b">-3</math>,
@@ -103,7 +103,7 @@ Why does the quadratic equation look so strange? The `<m>` tag does no simplific
 
 How can we ensure that the quadratic equation will always be rendered nicely? It turns out to be trickier than expected. A natural first thought is to use `<math>` instead of `<m>`:
 
-```html {7}
+```doenet {7}
 <p>Define the coefficients for a quadratic function here: 
   <math name="a">1</math>,
   <math name="b">-3</math>,
@@ -117,7 +117,7 @@ Test code [here](https://www.doenet.org/portfolioeditor/_J1J2N530LyIvVWx64xB8V/_
 
 That's an improvement; when displaying a `<math>` object, Doenet makes some straightforward adjustments such as writing $-3 x$ instead of $+ -3x$, but we still have $1x^2$ at the beginning of the equation. Perhaps we can fix that issue by adding `simplify` to the tag defining the equation?
 
-```html {7}
+```doenet {7}
 <p>Define the coefficients for a quadratic function here: 
   <math name="a">1</math>,
   <math name="b">-3</math>,
@@ -133,7 +133,7 @@ We're definitely getting closer! Doenet now displays $x^2 - 3x + 2$ as expected,
 
 To fix that remaining issue, we should use `<math>` to simplify just the quadratic polynomial, and display the rest of the equation with `<m>`. We could use side-by-side `<math>` and `<m>` tags, or nest them, as shown below. Nesting the tags is preferred, because it ensures the spacing is correct throughout the equation. (In the side-by-side example below, $=$ is too close to the $2$. You could manually leave a space between the side-by-side tags, but experienced HTML users know that it's dicey to expect that blank spaces or lines will be preserved.)
 
-```html
+```doenet
 <p>Define the coefficients for a quadratic function here: 
   <math name="a">1</math>,
   <math name="b">-3</math>,
diff --git a/packages/docs-nextra/pages/tutorials/introdTutorial/iT1-5-setup-blocks.mdx b/packages/docs-nextra/pages/tutorials/introdTutorial/iT1-5-setup-blocks.mdx
index abd0426ff..d5e009a04 100644
--- a/packages/docs-nextra/pages/tutorials/introdTutorial/iT1-5-setup-blocks.mdx
+++ b/packages/docs-nextra/pages/tutorials/introdTutorial/iT1-5-setup-blocks.mdx
@@ -1,4 +1,4 @@
-import { DoenetML} from "../../../components/doenet"
+import { DoenetViewer, DoenetEditor, DoenetExample } from "../../../components"
 
 # Setup Blocks
 
@@ -8,7 +8,7 @@ In the following example, the numbers $a$, $b$, and $c$ are defined as `<math>`
 $b^2 - 4 a c$
 . None of those definitions and computation are displayed on screen, but all four numbers are used later on.
 
-```html {1,9}
+```doenet {1,9}
 <setup>  
   <math name="a">2</math>
   <math name="b">8</math>
@@ -29,7 +29,7 @@ Test code [here](https://www.doenet.org/portfolioeditor/_J1J2N530LyIvVWx64xB8V/_
 
 For comparison, here's the same code with `<setup>` and `</setup>` removed. The four numbers from the `<setup>` block are all displayed on screen, which is confusing to the user!
 
-```html
+```doenet
 <math name="a">2</math>
 <math name="b">8</math>
 <math name="c">6</math>
diff --git a/packages/docs-nextra/pages/tutorials/introdTutorial/iT1-6-user-input.mdx b/packages/docs-nextra/pages/tutorials/introdTutorial/iT1-6-user-input.mdx
index a156c3914..0805fd53c 100644
--- a/packages/docs-nextra/pages/tutorials/introdTutorial/iT1-6-user-input.mdx
+++ b/packages/docs-nextra/pages/tutorials/introdTutorial/iT1-6-user-input.mdx
@@ -1,4 +1,4 @@
-import { DoenetML} from "../../../components/doenet"
+import { DoenetViewer, DoenetEditor, DoenetExample } from "../../../components"
 
 # User Input and Basic Answer Checking
 
@@ -13,7 +13,7 @@ The simplest way to have the user enter a number or mathematical expression is u
 
 In the example below, enter a number in the input box, and press return.
 
-```html {2}
+```doenet {2}
 <p>
   Enter a value for <m>x</m>: <mathInput name="userNumber" />
 </p>
@@ -24,7 +24,7 @@ Test code [here](https://www.doenet.org/portfolioeditor/_J1J2N530LyIvVWx64xB8V/_
 
 In that example, Doenet displays $\_  ^2$ until you have entered a number; when the `<mathInput>` is blank, Doenet does not have a number to square. Although this makes logical sense, it looks very odd on the screen. You can avoid this by providing a default value for the `<mathInput>` object, using the `prefill` attribute. In the following code, `userNumber` is assigned a default value of $3$, but you can type a new number in the input box.
 
-```html {3}
+```doenet {3}
 <p>
   Enter a value for <m>x</m>: 
   <mathInput name="userNumber" prefill="3" />
@@ -44,7 +44,7 @@ Similar to [Desmos](https://desmos.com/) and other websites, input in a `<mathIn
 
 DoenetML documents can have multiple `<mathInput>` tags. The following code is a modification of our earlier quadratic formula example; now that we've learned about user input, the reader can change the values of $a$, $b$, or $c$, and Doenet will solve the resulting equation.
 
-```html {2-4}
+```doenet {2-4}
 <p>Enter the coefficients for <m>ax^2+bx+c</m>:</p> 
  <p><m>a = </m> <mathInput name="a" prefill="1"/></p>
  <p><m>b = </m> <mathInput name="b" prefill="-3"/></p>
@@ -64,7 +64,7 @@ Test code [here](https://www.doenet.org/portfolioeditor/_J1J2N530LyIvVWx64xB8V/_
 
 Although it's not specific to `<mathInput>` components, this is a good moment to point out an important feature of Doenet. The following example is almost identical to the previous one; the only difference is that the quadratic formula calculations have been moved to a `<setup>` block, and then are referred to later on as `$solution1` and `$solution2`.
 
-```html {1,4}
+```doenet {1,4}
 <setup>
    <math simplify name="solution1">(-$b + sqrt($b^2- 4*$a*$c))/(2*$a)</math>
    <math simplify name="solution2">(-$b - sqrt($b^2- 4*$a*$c))/(2*$a)</math>
@@ -92,14 +92,14 @@ Often we want to pose a question to a user, have them type some input, and then
 
 The `<answer>` component provides visual feedback, with a blue "Enter" button that changes to a red X or green check mark, depending on whether the submitted answer is wrong or right.
 
-```html
+```doenet
 <p>Enter <m>5x^2-3</m>: <answer>5x^2-3</answer></p>
 ```
 Test code [here](https://www.doenet.org/portfolioeditor/_J1J2N530LyIvVWx64xB8V/_AgzWwqGV6Yy9DfqMyGlFm).
 
 The contents of an `<answer>` can depend on other objects. In the code below, you can enter constants to modify the linear equation, and then in the test editor check that you can correctly find the solution to the equation.
 
-```html {13}
+```doenet {13}
 <setup>
   <math simplify name="solution">($c-$b)/$a</math>
 </setup>
@@ -119,7 +119,7 @@ Test code [here](https://www.doenet.org/portfolioeditor/_J1J2N530LyIvVWx64xB8V/_
 ### Multiple Answers and `<mathList>`
 Often a question has more than one answer; a quadratic equation could have two solutions, for example. The following code combines a few of our previous examples. You can adjust the coefficients of a quadratic equation, and then check whether you can correctly compute the solutions. You can enter both solutions, separated by a comma, and then check your answer.
 
-```html {16-18}
+```doenet {16-18}
 <setup>
   <math simplify name="solution1">(-$b + sqrt($b^2- 4*$a*$c))/(2*$a)</math>
   <math simplify name="solution2">(-$b - sqrt($b^2- 4*$a*$c))/(2*$a)</math>
@@ -144,7 +144,7 @@ Test code [here](https://www.doenet.org/portfolioeditor/_J1J2N530LyIvVWx64xB8V/_
 
 As you can see in the code, the correct response is defined as a `<mathList>`, which is a list of `<math>` objects:
 
-```html
+```doenet
 <mathList>$object1 ... $objectN</mathList>
 ```
 
diff --git a/packages/docs-nextra/pages/tutorials/introdTutorial/iT1-7-functions.mdx b/packages/docs-nextra/pages/tutorials/introdTutorial/iT1-7-functions.mdx
index 2e88df7a6..e85e9f359 100644
--- a/packages/docs-nextra/pages/tutorials/introdTutorial/iT1-7-functions.mdx
+++ b/packages/docs-nextra/pages/tutorials/introdTutorial/iT1-7-functions.mdx
@@ -1,23 +1,23 @@
-import { DoenetML} from "../../../components/doenet"
+import { DoenetViewer, DoenetEditor, DoenetExample } from "../../../components"
 
 # Functions and Evaluation
 
 ### The `<function>` and `<evaluate>` Tags
 In DoenetML, a function is defined using the `<function>` tag; place the formula defining the function between the opening and closing tags. If you want to evaluate the function at a given input value later, make sure to give your function a name. For example:
 
-```html
+```doenet
      <function name="f">x^2+1</function>
 ```
 
 To evaluate your function, use the self-closing `<evaluate>` tag as follows:
 
-```html
+```doenet
      <evaluate function="$functionName" input="inputValue" />
 ```
 
 The following code shows this in action, with both numeric and symbolic input.
 
-```html
+```doenet
 <setup>  
   <function name="f">x^2+1</function>
 </setup>
@@ -29,7 +29,7 @@ Test code [here](https://www.doenet.org/portfolioeditor/_J1J2N530LyIvVWx64xB8V/_
 
 In the above example, the function $f$ was defined in the `<setup>` block. If you include a `<function>` within the main text of your document, outside of a setup block, Doenet will render the formula for the function, but not the function name. In that situation, you probably want to include code such as `<m>g(x) = ... </m>` to avoid having a random, "floating" formula in your document:
 
-```html
+```doenet
 <p><function name="f">x^2+1</function></p>
 
 <p><m>g(x) = <function name="g">sin( pi x)</function></m></p>
@@ -39,13 +39,13 @@ Test code [here](https://www.doenet.org/portfolioeditor/_J1J2N530LyIvVWx64xB8V/_
 ### The `$$` Macro
 In mathematics we spend a lot of time evaluating functions. It would be time consuming and awkward to write `<evaluate function="$functionName" input="inputValue" />` every time you want to plug a value into a function. Fortunately, DoenetML provides a time-saving macro:
 
-```html
+```doenet
      $$f(inputValue)
 ```
 
 The syntax shown above is equivalent to the longer `<evaluate>` tag. Frequently you want to evaluate a function at some number which was provided in a `<mathInput/>` box or defined as a `<math>`, so expressions like `$$f($a)` are extremely common in DoenetML; essentially that expression means "evaluate $f(x)$ at $x = a$."
 
-```html
+```doenet
 <p><m>f(x) = 
   <function name="func">2x+3</function>
 </m>, and <m>f(0) = $$func(0)</m>.</p>
@@ -68,7 +68,7 @@ The most common mistake with `$` and `$$` is to define a function named $f$ and
 
 These behaviors are illustrated in the following example.
 
-```html
+```doenet
 <p>The next two lines are functionally equivalent.  (Pun intended!)</p>
 <p><function name="f">x^2</function></p>
 <p>$f</p>
@@ -83,7 +83,7 @@ Test code [here](https://www.doenet.org/portfolioeditor/_J1J2N530LyIvVWx64xB8V/_
 ### User-Defined Functions
 In DoenetML documents, we sometimes want to evaluate a function which is provided by the student. (See this [Arclength demonstration](https://www.doenet.org/portfolioviewer/_GreyYWRKHtWjTGfgI8axS), for example.) One way to accomplish this is by having the user enter a formula in a `<mathInput/>`, and then use the value of that input to define a function. See the example below for an example.
 
-```html
+```doenet
 <setup>
   <function name="f">$userFormula</function>
 </setup>
@@ -104,7 +104,7 @@ Test code [here](https://www.doenet.org/portfolioeditor/_J1J2N530LyIvVWx64xB8V/_
 *This section is a bit technical and could be skipped if you're just starting to learn DoenetML. It's included for later reference, because the feature described here could be very important to you as you learn to write more complicated DoenetML documents.*
 
 By default, DoenetML functions are evaluated *symbolically*. If you define
-```html
+```doenet
      <function name="f">x^2+1</function>
 ```
 
@@ -112,7 +112,7 @@ then you can evaluate f with numeric or symbolic inputs: `$$f(2)` returns 5, and
 
 Sometimes, you might know ahead of time that you will only evaluate a function with numeric inputs. In that case, you can create a "numeric function" (as opposed to "symbolic function") by including the attribute `symbolic="false"` in the function definition. Check out the following example to see how this affects function evaluation.
 
-```html
+```doenet
 <p>Symbolic: <m>f(x) = <function name="f">1/x</function></m></p>
 <p><m> f(2) = $$f(2)</m></p>
 <p><m> f(\pi) = $$f(pi)</m></p>
diff --git a/packages/docs-nextra/pages/tutorials/introdTutorial/iT1-8-domains.mdx b/packages/docs-nextra/pages/tutorials/introdTutorial/iT1-8-domains.mdx
index 027e77ec9..1a2c40584 100644
--- a/packages/docs-nextra/pages/tutorials/introdTutorial/iT1-8-domains.mdx
+++ b/packages/docs-nextra/pages/tutorials/introdTutorial/iT1-8-domains.mdx
@@ -1,4 +1,4 @@
-import { DoenetML} from "../../../components/doenet"
+import { DoenetViewer, DoenetEditor, DoenetExample } from "../../../components"
 
 # Domains, Derivatives and Variables
 
@@ -7,7 +7,7 @@ In this section we'll explore additional options and operations with functions i
 ### Specifying the Domain of a Function
 So far the functions we've used have been defined for all real numbers. If you want to restrict the domain of a function, you can use the domain attribute in the `<function>` tag. Any attempt to evaluate the function outside of its specified domain will return an empty result. In the example below, this happens for $f(3)$.
 
-```html
+```doenet
 <setup>
   <function name="f" domain="[0,2]">
     x^2
@@ -23,20 +23,20 @@ Test code [here](https://www.doenet.org/portfolioeditor/_J1J2N530LyIvVWx64xB8V/_
 
 As of this writing, DoenetML supports any interval (open, closed, half open / half closed) as the domain of a single variable function. This includes intervals which stretch to infinity, e.g.
 
-```html
+```doenet
 <function name="f" domain="[1,infinity)">1/x</function>
 ```
 
 ### Computing Derivatives
 In DoenetML, we can compute the derivative of an elementary function using the `<derivative>` tag. The code
 
-```html
+```doenet
 <derivative name="fPrime">$f</derivative>
 ```
 
 creates a new DoenetML function named `fPrime` which is the derivative of $f$. The new function `fPrime` can be used in all the same ways as the original function, including evaluation using the `$$` macro. Here's an example.
 
-```html
+```doenet
 <setup>
   <function name="f">$userFormula</function>
 </setup>
@@ -61,7 +61,7 @@ If your original function has a specified `domain`, its derivative will have the
 The default variable in a DoenetML function is 
 $x$, but we can switch to a different variable using the `variable` attribute. This affects how the function is rendered on screen, and the `<derivative>` tag will use the correct variable as well.
 
-```html
+```doenet
 <p><m>f(u) = </m>
   <function name="f" variable="u">cos(u)</function>
 </p>
@@ -75,7 +75,7 @@ Test code [here](https://www.doenet.org/portfolioeditor/_J1J2N530LyIvVWx64xB8V/_
 ### Higher Order Derivatives
 You can compute higher order derivatives through repeated use of `<derivative>` tags. For example, the following code defines a function along with its first and second derivatives.
 
-```html
+```doenet
 <function name="f">x sin(x)</function>
 
 <derivative name="fP">$f</derivative>
@@ -85,7 +85,7 @@ You can compute higher order derivatives through repeated use of `<derivative>`
 
 However, if you don't need $f'(x)$, you can jump straight to the second (or higher) derivative using the `derivVariables` attribute, as demonstrated in the following example.
 
-```html
+```doenet
 <p><m>f(x) = </m>
   <function name="f">x sin(x)</function>
 </p>
@@ -105,13 +105,13 @@ Test code [here](https://www.doenet.org/portfolioeditor/_J1J2N530LyIvVWx64xB8V/_
 ### Multivariable Functions and Partial Derivatives
 For those familiar with multivariable calculus: now it's time to tie all of the concepts in this section together! We can define a multivariable function using the `variables` attribute with `<function>`. For example,
 
-```html
+```doenet
 <function name="f" variables="x y">x^2 cos(y)</function>
 ```
 
 defines the function $f(x,y) = x^2 \cos (y)$ in DoenetML. The input variables should be listed (in order) in the variables attribute, separated by spaces. "In order" means that, if we evaluate `$$f(1,2)`, Doenet will set $x = 1$ and $y = 2$ because $x$ was listed first in the variables attribute, and $y$ second.
 
-```html
+```doenet
 <p><m>f(x,y) = </m>
   <function name="f" variables="x y">x^2 cos(y)</function>
 </p>
@@ -124,7 +124,7 @@ Test code [here](https://www.doenet.org/portfolioeditor/_J1J2N530LyIvVWx64xB8V/_
 
 To compute partial derivatives, we'll use the same `derivVariables` attribute from above. We can list one variable to specify which partial derivative to take. We can provide a list of variables to compute higher order (and mixed) partial derivatives.
 
-```html
+```doenet
 <p><m>f(x,y) = </m>
   <function name="f" variables="x y">x^2 cos(y)</function>
 </p>
@@ -146,7 +146,7 @@ Test code [here](https://www.doenet.org/portfolioeditor/_J1J2N530LyIvVWx64xB8V/_
 
 Although it's not demonstrated in these examples, you can also define a `domain` for multivariable functions. In the following definition,
 
-```html
+```doenet
 <function name="f" variables="x y" domain="[0,1] (2,3)">x+y</function>
 ```
 
diff --git a/packages/docs-nextra/pages/tutorials/introdTutorial/iT1-9-sliders.mdx b/packages/docs-nextra/pages/tutorials/introdTutorial/iT1-9-sliders.mdx
index addb25c7a..d3079b544 100644
--- a/packages/docs-nextra/pages/tutorials/introdTutorial/iT1-9-sliders.mdx
+++ b/packages/docs-nextra/pages/tutorials/introdTutorial/iT1-9-sliders.mdx
@@ -1,14 +1,12 @@
-import { DoenetMLExample } from "../../../components"
+import { DoenetViewer, DoenetEditor, DoenetExample } from "../../../components"
 
 # Sliders
 
 Earlier you learned how to use `<mathInput>` to allow users to input text. Sliders are another common way for readers to input values or control an on-screen activity. By default, the (self-closing) tag `<slider/>` creates the following generic slider:
 
-<DoenetMLExample>
-{`
+```doenet-example
 <slider />
-`}
-</DoenetMLExample>
+```
 
 You can drag the point right and left to choose a value from 0 to 10. The default value is 0, and the "step size" is 1; in other words, the value changes by $\pm 1$ as you drag back and forth. All of these options (and more!) can be adjusted using attributes.
 
@@ -16,7 +14,7 @@ You can drag the point right and left to choose a value from 0 to 10. The defaul
 
 The following example illustrates how to adjust the minimum and maximum values of a slider, the step size, and more. In the test editor, be sure to experiment with the code and click "update" to see how these attributes work.
 
-```html
+```doenet
 <slider showValue="false" />
 
 <slider from="5" to="20" step="3" initialValue="8"/>
@@ -42,7 +40,7 @@ For completeness, here's a rundown of the attributes in those examples:
 ### Customized Slider Labels
 We can adjust the label on a slider using the `<label>` tag. This is a separate tag, not an attribute, and it must be nested between `<slider>` and `</slider>`; we can't use the "self-closing" style tag in this situation. This is demonstrated in the code below. We've also given the slider a name attribute, so that we can use its value in a calculation.
 
-```html
+```doenet
 <slider from="-40" to="40" step="1" 
   initialValue="0" name="tempC">
   <label>Temp (<m>{}^{\circ}C</m>)</label>
@@ -61,7 +59,7 @@ Test code [here](https://www.doenet.org/portfolioeditor/_J1J2N530LyIvVWx64xB8V/_
 ### Binding Sliders and Inputs
 Sometimes you want to provide your readers with maximum flexibility, and allow them to change a value using an input box *or* a slider! We can do that with the following code. The `<mathInput/>` is named $x$, and its value is used in the computation of `$$f($x)`. But we've used the `bindValueTo` attribute to ensure that the value of $x$ will always match the value of `xSlider`.
 
-```html
+```doenet
 <p>Let <m>f(x) = <function name="f">x^2+1</function></m>.</p>
 
 <p>Choose a value of <m>x</m> (or adjust slider):</p>
@@ -77,7 +75,7 @@ Try adjusting the slider, and notice that the value in the `<mathInput/>` box is
 
 **Warning!** You can also bind the value of a slider to an input box... but you shouldn't! That approach leads to the following unexpected behavior. In the code below, instead of including the `bindValueTo="$xSlider"` attribute in the `<mathInput/>` tag, we've bound the slider to the input box instead:
 
-```html
+```doenet
 <p><m>x = </m> <mathInput name="x" /></p>
 
 <slider from="0" to="5" step="1" name="xSlider" bindValueTo="$x" /> 
diff --git a/packages/docs-nextra/pages/tutorials/quickStart.mdx b/packages/docs-nextra/pages/tutorials/quickStart.mdx
index 2d7d657ac..1b267e286 100644
--- a/packages/docs-nextra/pages/tutorials/quickStart.mdx
+++ b/packages/docs-nextra/pages/tutorials/quickStart.mdx
@@ -1,28 +1,30 @@
-import { DoenetMLExample } from "../../components"
+import { DoenetViewer, DoenetEditor, DoenetExample } from "../../components"
 import { Callout } from 'nextra/components'
 
-# Quick Start Tutorial Modified by Jason
+# Quick Start Tutorial
 
 ### Writing Your First DoenetML Document
 DoenetML is an easy way to author interactive math activities for the web. In the next few minutes this guide will show you how to make a math assessment that can give your students instant feedback.
 
 Here is an example math question with a place for students to type in and check their answers. Go ahead and answer the question and check your work.
 
-<DoenetMLExample>
-{`
+Now lets look at the DoenetML you need to write to make this question.
+
+```doenet-example
 Simplify
-<math>3/3+3</math>
+<math>3 / 3 + 3</math>
 <answer symbolicEquality>4</answer>
-`}
-</DoenetMLExample>
+```
 
 Now lets look at the DoenetML you need to write to make this question.
 
-```html
+```doenet
 Simplify
 <math>3 / 3 + 3</math>
 <answer symbolicEquality>4</answer>
 ```
+
+
 Test code [here](https://www.doenet.org/portfolioeditor/_J1J2N530LyIvVWx64xB8V/_AgzWwqGV6Yy9DfqMyGlFm).
 
 ### Markup Languages
diff --git a/packages/docs-nextra/pages/tutorials/quickStart/quickStart-1.mdx b/packages/docs-nextra/pages/tutorials/quickStart/quickStart-1.mdx
index 4a758a821..5ffaa67e5 100644
--- a/packages/docs-nextra/pages/tutorials/quickStart/quickStart-1.mdx
+++ b/packages/docs-nextra/pages/tutorials/quickStart/quickStart-1.mdx
@@ -1,4 +1,4 @@
-import { DoenetML} from "../../../components/doenet"
+import { DoenetViewer, DoenetEditor, DoenetExample } from "../../../components"
 import { Callout } from 'nextra/components'
 
 <Callout type="info">
@@ -15,8 +15,7 @@ This tutorial covers a sample project in 5 parts; each part is about 5-10 minute
 
 # Part 1: Creating a Doenet Account & Starting an Activity
 
-<DoenetML>
-{`
+<DoenetViewer source={`
 <figure>
   <video youtube="krWLDxG7KSY"/>
   <caption>How to create a Doenet account</caption>
@@ -63,7 +62,7 @@ This tutorial covers a sample project in 5 parts; each part is about 5-10 minute
 <image source='doenet:cid=bafkreiew7b333mt3no7cbkzsnle7nqumwscg54pwkvgk76fzhbs5mjpaim' description='doenet make activity public' asfilename='Screenshot 2023-06-10 at 1.03.13 AM.png' width='400' aspectRatio="400/383"  mimeType='image/png' />  
 </section>
 `}
-</DoenetML>
+/>
 
 
 
diff --git a/packages/docs-nextra/pages/tutorials/quickStart/quickStart-2.mdx b/packages/docs-nextra/pages/tutorials/quickStart/quickStart-2.mdx
index 9337c8761..de9d7724e 100644
--- a/packages/docs-nextra/pages/tutorials/quickStart/quickStart-2.mdx
+++ b/packages/docs-nextra/pages/tutorials/quickStart/quickStart-2.mdx
@@ -1,4 +1,4 @@
-import { DoenetML} from "../../../components/doenet"
+import { DoenetViewer, DoenetEditor, DoenetExample } from "../../../components"
 import { Callout } from 'nextra/components'
 
 # Part 2: A first question with two possible answers
@@ -12,27 +12,20 @@ In the editor, click on the text at the top of the page where it says "Untitled"
 
 Next, let’s add a title that the student will see when they complete the activity. To do this, we’ll need to use the `<title>` tag. Place the text for your title between the opening and closing title tags. My title is “Drawing Circles”.
 
-<DoenetML>
-{`
-<codeEditor showResults resultsLocation="left">
+```doenet-editor
 <title>Drawing Circles</title>
-</codeEditor>
-`}
-</DoenetML>
+```
 
 Click the “Update” button in the upper-left corner to see the title rendered on screen.
 
 The first thing I’d like to do in this activity is ask the students what they know about the formula for the area of a circle, since it will come up in the constructions later on. I’ll first create a paragraph of text using the `<p>` tag,
 
-<DoenetML>
-{`
-<codeEditor showResults resultsLocation="left">
+<DoenetEditor source={`
 <p>Let’s review what we know about circles…</p>
 
 <p>What is the formula for the area of a circle?</p>
-</codeEditor>
 `}
-</DoenetML>
+/>
 
 Now, I’d like to show the left-hand side of the equation in mathematical display text, and have the student complete the right-hand side of the equation. To do that, I’ll create another paragraph, and within this `<p>` I'll place an `<m>` tag for the mathematical display text; an `<m>` tag accepts LateX as input.
 
@@ -40,15 +33,12 @@ Now, I’d like to show the left-hand side of the equation in mathematical displ
 
 It’s important to always close off an `<m>` tag before starting an `<answer>` tag, which is what I’ll use to collect and evaluate the student’s response. The simplest way to evaluate an answer is to place the mathematically correct response between the opening and closing `<answer>` tags. 
 
-<DoenetML>
-{`
-<codeEditor showResults resultsLocation="left">
+<DoenetEditor source={`
 <p><m>A = </m> 
     <answer>pi r^2</answer>
 </p>
-</codeEditor>
 `}
-</DoenetML>
+/>
 
 Now, let’s click update and test out that  the `<answer>` tag is working as expected.
 
@@ -56,28 +46,22 @@ Hopefully everything is working for you up to this point. Try testing out differ
 
 However, what if we are starting to be concerned about the student using the correct variable for $r$? We can include a hint guiding the student to the correct choice of variable using the `<hint>` tag:
 
-<DoenetML>
-{`
-<codeEditor showResults resultsLocation="left">
+<DoenetEditor source={`
 <hint>Use <m>r</m> for the circle's radius.</hint>
-</codeEditor>
 `}
-</DoenetML>
+/>
 
 Last, perhaps I also want to give credit to student responses that use the diameter of the circle as the defining variable. I will update my `<answer>` tag by giving it two `<award>` children. The first `<award>` will give credit to students who enter the equation in terms of $r$, and the second `<award>` will give credit for responses in terms of $d$.
 
-<DoenetML>
-{`
-<codeEditor showResults resultsLocation="left">
+<DoenetEditor source={`
 <p>What is the formula for the area of a circle?</p>
 <p><m>A = </m>
   <answer>
     <award>pi r^2</award>
     <award>pi d^2 / 4</award>
   </answer></p>
-</codeEditor>
 `}
-</DoenetML>
+/>
 
 
 Now, I’ll update the hint to also give the correct variable to use for the diameter.

From d90779eab007ce192e9c18f60cca4a2c77adeede Mon Sep 17 00:00:00 2001
From: Duane Nykamp <nykamp@umn.edu>
Date: Thu, 1 Aug 2024 17:30:42 -0500
Subject: [PATCH 3/7] prettier

---
 packages/docs-nextra/pages/style.css              | 5 ++---
 packages/lsp-tools/src/doenet-to-markdown/trim.ts | 2 +-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/docs-nextra/pages/style.css b/packages/docs-nextra/pages/style.css
index 970703b9e..bfcc10307 100644
--- a/packages/docs-nextra/pages/style.css
+++ b/packages/docs-nextra/pages/style.css
@@ -2,14 +2,13 @@
     border: 2px solid rgb(229, 231, 235);
     border-radius: 10px;
     padding: 0px;
-    margin-top:1.5rem;
+    margin-top: 1.5rem;
 }
 
 .doenet-editor-container {
-    margin-top:1.5rem;
+    margin-top: 1.5rem;
 }
 
-
 .attr-table,
 .prop-table {
     margin-left: auto;
diff --git a/packages/lsp-tools/src/doenet-to-markdown/trim.ts b/packages/lsp-tools/src/doenet-to-markdown/trim.ts
index 222ad6f1c..3816b9207 100644
--- a/packages/lsp-tools/src/doenet-to-markdown/trim.ts
+++ b/packages/lsp-tools/src/doenet-to-markdown/trim.ts
@@ -41,7 +41,7 @@ export function trimLeadingWhitespace(
     // Find the number of whitespace characters at the start of each line, with `\t` counting as `tabWidth` spaces.
     const leadingWhitespace = lines.flatMap((line) =>
         // Blank lines count as having infinite amounts of whitespace, so they are skipped over.
-        line.length === 0 ? [] : (line.match(/^(\s*)/)?.[0] ?? ""),
+        line.length === 0 ? [] : line.match(/^(\s*)/)?.[0] ?? "",
     );
     const whitespaceCount = leadingWhitespace.map((sp) =>
         sp.split("").reduce((acc, c) => acc + (c === "\t" ? tabWidth : 1), 0),

From 5ebab1e4b35f17b217c568c0333daac26fa1422a Mon Sep 17 00:00:00 2001
From: Duane Nykamp <nykamp@umn.edu>
Date: Thu, 1 Aug 2024 18:59:28 -0500
Subject: [PATCH 4/7] fix more doc pages

---
 .../reference/doenetML_components/alert.mdx   |   9 +-
 .../reference/doenetML_components/and.mdx     |   9 +-
 .../animateFromSequence.mdx                   |   6 +-
 .../reference/doenetML_components/answer.mdx  |   7 +-
 .../reference/doenetML_components/aside.mdx   |   8 +-
 .../reference/doenetML_components/boolean.mdx | 112 +++++-------------
 packages/docs-nextra/pages/testExDoenetML.mdx |  14 +--
 .../pages/tutorials/sampleProject1.mdx        |  37 ++----
 .../lsp-tools/src/doenet-to-markdown/trim.ts  |   2 +-
 9 files changed, 56 insertions(+), 148 deletions(-)

diff --git a/packages/docs-nextra/pages/reference/doenetML_components/alert.mdx b/packages/docs-nextra/pages/reference/doenetML_components/alert.mdx
index e2a7d8aa6..d7a018266 100644
--- a/packages/docs-nextra/pages/reference/doenetML_components/alert.mdx
+++ b/packages/docs-nextra/pages/reference/doenetML_components/alert.mdx
@@ -15,9 +15,6 @@ The `<alert>` component has no attributes or properties.
 ```
 
 ### Test Code
-<DoenetML>
-{`
-<codeEditor showResults resultsLocation="bottom" height="700">
-</codeEditor>
-`}
-</DoenetML>
\ No newline at end of file
+```doenet-editor
+
+```
\ No newline at end of file
diff --git a/packages/docs-nextra/pages/reference/doenetML_components/and.mdx b/packages/docs-nextra/pages/reference/doenetML_components/and.mdx
index 97877032b..311cf6d65 100644
--- a/packages/docs-nextra/pages/reference/doenetML_components/and.mdx
+++ b/packages/docs-nextra/pages/reference/doenetML_components/and.mdx
@@ -85,9 +85,6 @@ The word `and` may be typed directly within any component that takes a boolean e
 
 <a id="test-code"></a>
 ### Test Code
-<DoenetML>
-{`
-<codeEditor showResults resultsLocation="bottom" height="700">
-</codeEditor>
-`}
-</DoenetML>
\ No newline at end of file
+```doenet-editor
+
+```
\ No newline at end of file
diff --git a/packages/docs-nextra/pages/reference/doenetML_components/animateFromSequence.mdx b/packages/docs-nextra/pages/reference/doenetML_components/animateFromSequence.mdx
index 75fb5b45c..1fcb76035 100644
--- a/packages/docs-nextra/pages/reference/doenetML_components/animateFromSequence.mdx
+++ b/packages/docs-nextra/pages/reference/doenetML_components/animateFromSequence.mdx
@@ -1,7 +1,6 @@
 import { DoenetViewer, DoenetEditor, DoenetExample } from "../../../components"
 
-<DoenetML>
-{`
+```doenet-viewer
 <section>
   <title><tage>animateFromSequence</tage></title>
 
@@ -344,5 +343,4 @@ n = <number name="n">0</number>
   
 </section>
 
-`}
-</DoenetML>
+```
\ No newline at end of file
diff --git a/packages/docs-nextra/pages/reference/doenetML_components/answer.mdx b/packages/docs-nextra/pages/reference/doenetML_components/answer.mdx
index 548809a2f..18a0b1d68 100644
--- a/packages/docs-nextra/pages/reference/doenetML_components/answer.mdx
+++ b/packages/docs-nextra/pages/reference/doenetML_components/answer.mdx
@@ -8,13 +8,10 @@ import { DoenetViewer, DoenetEditor, DoenetExample } from "../../../components"
 ## Basic usage examples
 
 ### Example: 
-<DoenetML>
-{`
-<codeEditor showResults resultsLocation="bottom">
+```doenet-editor
     <p>stuff inside</p>
 </codeEditor>
-`}
-</DoenetML>
+```
 
 brief expo.
 
diff --git a/packages/docs-nextra/pages/reference/doenetML_components/aside.mdx b/packages/docs-nextra/pages/reference/doenetML_components/aside.mdx
index 548809a2f..e189815ac 100644
--- a/packages/docs-nextra/pages/reference/doenetML_components/aside.mdx
+++ b/packages/docs-nextra/pages/reference/doenetML_components/aside.mdx
@@ -8,13 +8,11 @@ import { DoenetViewer, DoenetEditor, DoenetExample } from "../../../components"
 ## Basic usage examples
 
 ### Example: 
-<DoenetML>
-{`
-<codeEditor showResults resultsLocation="bottom">
+```doenet-editor
     <p>stuff inside</p>
 </codeEditor>
-`}
-</DoenetML>
+```
+
 
 brief expo.
 
diff --git a/packages/docs-nextra/pages/reference/doenetML_components/boolean.mdx b/packages/docs-nextra/pages/reference/doenetML_components/boolean.mdx
index c864aaa6c..5e2b83b98 100644
--- a/packages/docs-nextra/pages/reference/doenetML_components/boolean.mdx
+++ b/packages/docs-nextra/pages/reference/doenetML_components/boolean.mdx
@@ -9,24 +9,18 @@ The `<boolean>` component renders the boolean value of `true` or `false` of the
 
 ### Example: Check if an equation is `true` or `false`
 
-<DoenetExample>
-{`
-<codeEditor showResults resultsLocation="bottom">
+```doenet-editor
 <p>The following equation is <alert><boolean>1 + 1 = $input</boolean></alert>.
 </p>
 
 <m>1 + 1 = </m> <mathInput name="input" prefill="3"/>
-</codeEditor>
-`}
-</DoenetExample>
+```
 
 A `<boolean>` component is used to render whether an equation is `true` or `false` for a user-supplied response.
 
 ### Example: Boolean value of a geometric property
 
-<DoenetExample>
-{`
-<codeEditor showResults resultsLocation="bottom" height="700">
+```doenet-editor
     <p><em>The slope of the line is greater than or equal to <m>1</m>:</em>
         <alert><boolean>$line1.slope >= 1</boolean></alert></p>
 
@@ -34,9 +28,7 @@ A `<boolean>` component is used to render whether an equation is `true` or `fals
         <point name="p1">(-4,-4)</point>
         <line name="line1" through="$p1"/>
     </graph>
-</codeEditor>
-`}
-</DoenetExample>
+```
 
 
 A `<boolean>` component is used to render whether a statement regarding the geometric slope of a named `<line>` is `true` or `false`. Drag the point to adjust the slope of the line which in turn will affect the value of the `<boolean>`.
@@ -44,9 +36,7 @@ A `<boolean>` component is used to render whether a statement regarding the geom
 
 ### Example: Constructing compound booleans
 
-<DoenetExample>
-{`
-<codeEditor showResults resultsLocation="bottom" height="700">
+```doenet-editor
 <p>Enter a number that is less than 100, greater than 20, and divisible by 3. <mathInput name="userNumber" /></p>
 
 <setup>
@@ -58,9 +48,7 @@ A `<boolean>` component is used to render whether a statement regarding the geom
 <p>$userNumber could be the number...
     <boolean>$lessThan100 and $greaterThan20 and $divisibleBy3</boolean> 
 !</p>
-</codeEditor>
-`}
-</DoenetExample>
+```
 
 References to `boolean` components can be combined with logical operators to create more complex boolean expressions.
 
@@ -83,15 +71,11 @@ References to `boolean` components can be combined with logical operators to cre
 
 ### Example: `symbolicEquality` attribute
 
-<DoenetExample>
-{`
-<codeEditor showResults resultsLocation="bottom">
+```doenet-editor
     <p>Enter <m>x^2 + 2x + 1</m> exactly: <mathInput name="mi" /></p>
         <boolean symbolicEquality>$mi = x^2 + 2x + 1</boolean>
     <p>Now, enter <m>(x + 1)^2</m> instead...</p>
-</codeEditor>
-`}
-</DoenetExample>
+```
 
 Comparing two values with the `symbolicEquality` attribute
 switches the default comparison method to one which demands exact syntactical equality. Without this attribute, a value of `true` would be returned both for `x^2 + 2x + 1` as well as `(x + 1)^2`.
@@ -99,14 +83,10 @@ switches the default comparison method to one which demands exact syntactical eq
 
 ### Example: `expandOnCompare` attribute
 
-<DoenetExample>
-{`
-<codeEditor showResults resultsLocation="bottom">
+```doenet-editor
     <p>Enter <m>(x + 1)^2</m>: <mathInput name="mi" /></p>
     <boolean expandOnCompare symbolicEquality>$mi = x^2 + 2x + 1</boolean>
-</codeEditor>
-`}
-</DoenetExample>
+```
 
 Comparing two values with the `expandOnCompare` and
 `symbolicEquality` attributes allows expressions that are
@@ -115,15 +95,11 @@ equivalent after expanding to evaluate to `true`. It is a partial relaxation of
 
 ### Example: `simplifyOnCompare` attribute
 
-<DoenetExample>
-{`
-<codeEditor showResults resultsLocation="bottom">
+```doenet-editor
     <p>Enter <m>x*x + x + x + 1</m>: <mathInput name="mi" />
     </p>
         <boolean simplifyOnCompare symbolicEquality>$mi = x^2 + 2x + 1</boolean>
-</codeEditor>
-`}
-</DoenetExample>
+```
 
 Comparing two values with the `simplifyOnCompare` and
 `symbolicEquality` attributes allows expressions that are
@@ -131,51 +107,39 @@ equivalent after simplifying to evaluate to `true`. It is a partial relaxation o
 
 ### Example: `unorderedCompare` attribute
 
-<DoenetExample>
-{`
-<codeEditor showResults resultsLocation="bottom" height="600">
+```doenet-editor
     <p>Enter <m>1,2,3,4,5</m> in that exact order: <mathInput name="mi" /></p>
     <p><boolean> $mi = <mathList>1 2 3 4 5</mathList> </boolean></p>
 
     <p>Enter <m>1,2,3,4,5</m> in mixed-up order: <mathInput name="mi2" /></p>
     <p><boolean unorderedCompare>$mi2 = <mathList>1 2 3 4 5</mathList></boolean></p>
-</codeEditor>
-`}
-</DoenetExample>
+```
 
 When multiple values are compared within a single `<boolean>`tag, the default behavior is to match the order of the listed values. If order is irrelevant, use the `unorderedCompare` attribute.
 
 
 ### Example: `matchByExactPositions` attribute
 
-<DoenetExample>
-{`
-<codeEditor showResults resultsLocation="bottom" height="600">
+```doenet-editor
     <p>Enter <m>1,2,3</m> in that exact order:
         <mathInput name="mi1" />, <mathInput name="mi2" />, <mathInput name="mi3" /></p>
     <p><boolean matchByExactPositions>
              ($mi1, $mi2, $mi3) = (1, 2, 3)
         </boolean></p>
     <p>Now, observe what happens when you switch the order</p>
-</codeEditor>
-`}
-</DoenetExample>
+```
 
 When multiple responses are evaluated by comparison with a vector of correct values inside a `<boolean>`, the `matchByExactPositions` attribute enforces a strict order onto the validation. Only correct values in the correct answer blanks will allow the `<boolean>` to evaluate to `true`.
 
 ### Example: `allowedErrorInNumbers` and `allowedErrorIsAbsolute` attributes
 
-<DoenetExample>
-{`
-<codeEditor showResults resultsLocation="bottom" height="600">
+```doenet-editor
     <p>Enter a number within <m>10\%</m> of <m>100</m>: <mathInput name="mi1" /></p>
         <boolean allowedErrorInNumbers="0.1">$mi1 = 100</boolean>
 
     <p>Enter a number within <m>0.1</m> of <m>100</m>: <mathInput name="mi2" /></p>
         <boolean allowedErrorInNumbers="0.1" allowedErrorIsAbsolute>$mi2 = 100</boolean>
-</codeEditor>
-`}
-</DoenetExample>
+```
 
 The `allowedErrorInNumbers` attribute may be used to specify the acceptable error of an approximate response when comparing numerical values. By default, the error is specified as a fractional value.
 
@@ -184,17 +148,13 @@ To specify an allowed error with a specific numerical value (rather than as a fr
 
 ### Example: `caseInsensitiveMatch` attribute
 
-<DoenetExample>
-{`
-<codeEditor showResults resultsLocation="bottom" height="600">
+```doenet-editor
     <p>Enter tTkLp: <textInput name="ti1" /></p>
         <boolean>tTkLp = $ti1</boolean>
 
     <p>Enter tTkLp with any capitalization: <textInput name="ti2" /></p>
         <boolean caseInsensitiveMatch>tTkLp = $ti2</boolean>
-</codeEditor>
-`}
-</DoenetExample>
+```
 
 Use the `caseInsensitiveMatch` attribute if capitalization
 is not relevant for comparison.
@@ -202,18 +162,14 @@ is not relevant for comparison.
 
 ### Example: `matchBlanks` attribute
 
-<DoenetExample>
-{`
-<codeEditor showResults resultsLocation="bottom" height="600">
+```doenet-editor
 <p>Compare two expressions with blanks</p>
     <mathInput name="mi" prefill="/x" /> = <math>/x</math>
 <p><boolean matchBlanks>$mi = /x</boolean></p>
 
 <p>Comparing without the <attr>matchBlanks</attr> attribute: </p>
 <p><boolean>$mi = /x</boolean></p>
-</codeEditor>
-`}
-</DoenetExample>
+```
 
 Use the `matchBlanks` attribute to accurately compare two expressions containing blanks.
 
@@ -228,39 +184,29 @@ Use the `matchBlanks` attribute to accurately compare two expressions containing
 
 ### Example: `text` property
 
-<DoenetExample>
-{`
-<codeEditor showResults resultsLocation="bottom" height="500">
+```doenet-editor
     <p>Enter "1" for true, not "1" for false:</p>
         <mathInput name="mi" />
     <p><boolean name="bool">1 = $mi</boolean></p>
     <p><c>text</c> = $bool.text</p>
-</codeEditor>
-`}
-</DoenetExample>
+```
 
 The `text` property of a named `<boolean>` returns the
 value of "true" or "false" as a string.
 
 ### Example: `value` property
-<DoenetExample>
-{`
-<codeEditor showResults resultsLocation="bottom" height="500">
+```doenet-editor
 <p>Enter "1" for true, not "1" for false:</p>
     <mathInput name="mi" />
 <p><boolean name="bool">1 = $mi</boolean></p>
 <p><c>value</c> = $bool.value</p>
-</codeEditor>
-`}
-</DoenetExample>
+```
 
 The `value` property of a named `<boolean>` returns its
 value of `true` or `false`.
 
 ### Example: Attributes as properties
-<DoenetExample>
-{`
-<codeEditor showResults resultsLocation="bottom" height="800">
+```doenet-editor
     <math name="math1">x^2 + 2x + 1</math> = 
     <math name="math2">(x + 1)(x + 1)</math>
 
@@ -273,9 +219,7 @@ value of `true` or `false`.
     <p><c>simplifyOnCompare</c> = $bool.simplifyOnCompare</p>
     <p><c>unorderedCompare</c> = $bool.unorderedCompare</p>
     <p><c>matchByExactPositions</c> = $bool.matchByExactPositions</p>
-</codeEditor>
-`}
-</DoenetExample>
+```
 
 All attributes of a `<boolean>` are also available
 as properties.
diff --git a/packages/docs-nextra/pages/testExDoenetML.mdx b/packages/docs-nextra/pages/testExDoenetML.mdx
index 746106e9d..1864797c0 100644
--- a/packages/docs-nextra/pages/testExDoenetML.mdx
+++ b/packages/docs-nextra/pages/testExDoenetML.mdx
@@ -1,25 +1,21 @@
-import { DoenetML} from "../components/doenet"
+import { DoenetViewer, DoenetEditor, DoenetExample } from "../components"
 
 # Welcome to Nextra
  
 Hello, world!
 
-<DoenetML>
-{`
+```doenet-viewer
 <graph>
     <point />
 </graph>
-`}
-</DoenetML>
+```
 
 ```html
 foo <a href="foo">
 ```
 
-<DoenetML>
-{`
+```doenet-viewer
 <slider name="a"/>
 <p>The value of the slider is</p>
 $a
-`}
-</DoenetML>
\ No newline at end of file
+```
\ No newline at end of file
diff --git a/packages/docs-nextra/pages/tutorials/sampleProject1.mdx b/packages/docs-nextra/pages/tutorials/sampleProject1.mdx
index 253f35ca4..d68d43017 100644
--- a/packages/docs-nextra/pages/tutorials/sampleProject1.mdx
+++ b/packages/docs-nextra/pages/tutorials/sampleProject1.mdx
@@ -1,56 +1,37 @@
-import { DoenetML} from "../../components/doenet"
+import { DoenetViewer, DoenetEditor, DoenetExample } from "../../components"
 
 # DoenetML that doesn't work in Nextra
 
 First, any `<answer>` tag with a full response button
-<DoenetML>
-{`
-<codeEditor showResults resultsLocation="left">
+```doenet-editor
 <p>Enter 2 + 2: <mathInput name="mi"/> </p>
 <answer>
     <award>
         <when>$mi = 2 + 2</when>
     </award>
 </answer>
-</codeEditor>
-`}
-</DoenetML>
-
+```
 
 
 Second, the knowl elements such as aside, hint, etc...
 
-<DoenetML>
-{`
-<codeEditor showResults resultsLocation="left">
+```doenet-editor
 <aside>Stuff</aside>
 <hint>More stuff</hint>
-</codeEditor>
-`}
-</DoenetML>
+```
 
 Graph #1
 
-<DoenetML>
-{`
-<codeEditor showResults resultsLocation="left">
+```doenet-editor
 <graph name="g1">
     <line>y = 2x + 2</line>
 </graph>
-</codeEditor>
-`}
-</DoenetML>
+```
 
 Graph #2
 
-<DoenetML>
-{`
-<codeEditor showResults resultsLocation="left">
+```doenet-editor
 <graph name="g1">
     <line>y = -2x + 3</line>
 </graph>
-</codeEditor>
-`}
-</DoenetML>
-
-
+```
diff --git a/packages/lsp-tools/src/doenet-to-markdown/trim.ts b/packages/lsp-tools/src/doenet-to-markdown/trim.ts
index 3816b9207..222ad6f1c 100644
--- a/packages/lsp-tools/src/doenet-to-markdown/trim.ts
+++ b/packages/lsp-tools/src/doenet-to-markdown/trim.ts
@@ -41,7 +41,7 @@ export function trimLeadingWhitespace(
     // Find the number of whitespace characters at the start of each line, with `\t` counting as `tabWidth` spaces.
     const leadingWhitespace = lines.flatMap((line) =>
         // Blank lines count as having infinite amounts of whitespace, so they are skipped over.
-        line.length === 0 ? [] : line.match(/^(\s*)/)?.[0] ?? "",
+        line.length === 0 ? [] : (line.match(/^(\s*)/)?.[0] ?? ""),
     );
     const whitespaceCount = leadingWhitespace.map((sp) =>
         sp.split("").reduce((acc, c) => acc + (c === "\t" ? tabWidth : 1), 0),

From 24be8bd7f5605312a768071a3015a1fee7e5c727 Mon Sep 17 00:00:00 2001
From: Duane Nykamp <nykamp@umn.edu>
Date: Fri, 2 Aug 2024 12:01:55 -0500
Subject: [PATCH 5/7] create augmented MdxJsxFlowElement type

---
 packages/docs-nextra/scripts/types.ts               | 4 ++++
 packages/docs-nextra/scripts/wrap-doenet-editor.ts  | 6 +-----
 packages/docs-nextra/scripts/wrap-doenet-example.ts | 6 +-----
 packages/docs-nextra/scripts/wrap-doenet-viewer.ts  | 6 +-----
 4 files changed, 7 insertions(+), 15 deletions(-)
 create mode 100644 packages/docs-nextra/scripts/types.ts

diff --git a/packages/docs-nextra/scripts/types.ts b/packages/docs-nextra/scripts/types.ts
new file mode 100644
index 000000000..7bc353a43
--- /dev/null
+++ b/packages/docs-nextra/scripts/types.ts
@@ -0,0 +1,4 @@
+import { MdxJsxFlowElement as MdxJsxFlowElementOrig } from "mdast-util-mdx-jsx";
+export type MdxJsxFlowElement = MdxJsxFlowElementOrig & {
+    type: "mdxJsxFlowElement";
+};
diff --git a/packages/docs-nextra/scripts/wrap-doenet-editor.ts b/packages/docs-nextra/scripts/wrap-doenet-editor.ts
index 0f90beb81..a259826d3 100644
--- a/packages/docs-nextra/scripts/wrap-doenet-editor.ts
+++ b/packages/docs-nextra/scripts/wrap-doenet-editor.ts
@@ -2,8 +2,7 @@ import { visit } from "unist-util-visit";
 import { Plugin } from "unified";
 
 import { Root as MdastRoot } from "mdast";
-// Importing this automatically imports all the types from `mdast-util-mdx-jsx`.
-import "mdast-util-mdx-jsx";
+import { MdxJsxFlowElement } from "./types";
 
 /**
  * Wraps codeblocks of type `doenet-editor` with a JSX element that renders the editor with the output.
@@ -12,9 +11,6 @@ export const wrapDoenetEditor: Plugin<void[], MdastRoot, MdastRoot> =
     function () {
         return (tree) => {
             visit(tree, (node) => {
-                type MdxJsxFlowElement = typeof node & {
-                    type: "mdxJsxFlowElement";
-                };
                 if (node?.type !== "code") {
                     return;
                 }
diff --git a/packages/docs-nextra/scripts/wrap-doenet-example.ts b/packages/docs-nextra/scripts/wrap-doenet-example.ts
index 3c869552c..eaf8730bb 100644
--- a/packages/docs-nextra/scripts/wrap-doenet-example.ts
+++ b/packages/docs-nextra/scripts/wrap-doenet-example.ts
@@ -2,8 +2,7 @@ import { visit } from "unist-util-visit";
 import { Plugin } from "unified";
 
 import { Root as MdastRoot } from "mdast";
-// Importing this automatically imports all the types from `mdast-util-mdx-jsx`.
-import "mdast-util-mdx-jsx";
+import { MdxJsxFlowElement } from "./types";
 
 /**
  * Wraps codeblocks of type `doenet-example` with a JSX element that renders the code and the output.
@@ -12,9 +11,6 @@ export const wrapDoenetExample: Plugin<void[], MdastRoot, MdastRoot> =
     function () {
         return (tree) => {
             visit(tree, (node) => {
-                type MdxJsxFlowElement = typeof node & {
-                    type: "mdxJsxFlowElement";
-                };
                 if (node?.type !== "code") {
                     return;
                 }
diff --git a/packages/docs-nextra/scripts/wrap-doenet-viewer.ts b/packages/docs-nextra/scripts/wrap-doenet-viewer.ts
index c95d62c6b..de911ce7f 100644
--- a/packages/docs-nextra/scripts/wrap-doenet-viewer.ts
+++ b/packages/docs-nextra/scripts/wrap-doenet-viewer.ts
@@ -2,8 +2,7 @@ import { visit } from "unist-util-visit";
 import { Plugin } from "unified";
 
 import { Root as MdastRoot } from "mdast";
-// Importing this automatically imports all the types from `mdast-util-mdx-jsx`.
-import "mdast-util-mdx-jsx";
+import { MdxJsxFlowElement } from "./types";
 
 /**
  * Wraps codeblocks of type `doenet-editor` with a JSX element that renders the output.
@@ -12,9 +11,6 @@ export const wrapDoenetViewer: Plugin<void[], MdastRoot, MdastRoot> =
     function () {
         return (tree) => {
             visit(tree, (node) => {
-                type MdxJsxFlowElement = typeof node & {
-                    type: "mdxJsxFlowElement";
-                };
                 if (node?.type !== "code") {
                     return;
                 }

From 850d625b3dd5a7dbddfd61494d734baa1d1e5925 Mon Sep 17 00:00:00 2001
From: Jason Siefken <siefkenj@gmail.com>
Date: Mon, 5 Aug 2024 11:00:52 -0400
Subject: [PATCH 6/7] Fix whitespace issue

---
 .../docs-nextra/scripts/object-to-estree.ts   | 32 +++++++++++++++++++
 .../docs-nextra/scripts/wrap-doenet-editor.ts |  7 +++-
 2 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 packages/docs-nextra/scripts/object-to-estree.ts

diff --git a/packages/docs-nextra/scripts/object-to-estree.ts b/packages/docs-nextra/scripts/object-to-estree.ts
new file mode 100644
index 000000000..171343397
--- /dev/null
+++ b/packages/docs-nextra/scripts/object-to-estree.ts
@@ -0,0 +1,32 @@
+import { parseModule, Program as EstreeProgram } from "esprima";
+
+/**
+ * Turn a plain JS object into an ESTree object suitable for including in a `mdxJsxAttributeValueExpression`.
+ */
+export function objectToEstree(obj: any): EstreeProgram {
+    const estreeRaw = parseModule(`const IGNORE = ${JSON.stringify(obj)}`);
+
+    const decl = estreeRaw.body[0];
+    if (decl.type !== "VariableDeclaration") {
+        throw new Error("PARSE ERROR: Expected a VariableDeclaration");
+    }
+    const decl2 = decl.declarations[0];
+    if (decl2.type !== "VariableDeclarator") {
+        throw new Error("PARSE ERROR: Expected a VariableDeclarator");
+    }
+    const expr = decl2.init;
+    if (!expr) {
+        throw new Error("PARSE ERROR: Expected an Expression");
+    }
+
+    return {
+        type: "Program",
+        body: [
+            {
+                type: "ExpressionStatement",
+                expression: expr,
+            },
+        ],
+        sourceType: "module",
+    };
+}
diff --git a/packages/docs-nextra/scripts/wrap-doenet-editor.ts b/packages/docs-nextra/scripts/wrap-doenet-editor.ts
index a259826d3..45def701d 100644
--- a/packages/docs-nextra/scripts/wrap-doenet-editor.ts
+++ b/packages/docs-nextra/scripts/wrap-doenet-editor.ts
@@ -3,6 +3,7 @@ import { Plugin } from "unified";
 
 import { Root as MdastRoot } from "mdast";
 import { MdxJsxFlowElement } from "./types";
+import { objectToEstree } from "./object-to-estree";
 
 /**
  * Wraps codeblocks of type `doenet-editor` with a JSX element that renders the editor with the output.
@@ -30,7 +31,11 @@ export const wrapDoenetEditor: Plugin<void[], MdastRoot, MdastRoot> =
                         {
                             type: "mdxJsxAttribute",
                             name: "source",
-                            value: node.value,
+                            value: {
+                                type: "mdxJsxAttributeValueExpression",
+                                value: JSON.stringify(node.value),
+                                data: { estree: objectToEstree(node.value) },
+                            },
                         },
                     ],
                     children: [],

From 2a8dc075d4de244f09afd94205bc439e14b2eb81 Mon Sep 17 00:00:00 2001
From: Duane Nykamp <nykamp@umn.edu>
Date: Mon, 5 Aug 2024 10:38:32 -0500
Subject: [PATCH 7/7] doenet-editor and separate doenet-editor-horiz

---
 packages/docs-nextra/components/doenet.tsx    | 17 +++++-
 packages/docs-nextra/next.config.mjs          |  2 +
 .../intermediateTutorial/iT2-4-properties.mdx | 16 +----
 .../tutorials/quickStart/quickStart-1.mdx     |  6 +-
 .../tutorials/quickStart/quickStart-2.mdx     | 22 +++----
 .../docs-nextra/scripts/wrap-doenet-editor.ts | 61 +++++++++++++++++--
 .../docs-nextra/scripts/wrap-doenet-viewer.ts |  2 +-
 7 files changed, 85 insertions(+), 41 deletions(-)

diff --git a/packages/docs-nextra/components/doenet.tsx b/packages/docs-nextra/components/doenet.tsx
index 365b64b49..37f4b9f7c 100644
--- a/packages/docs-nextra/components/doenet.tsx
+++ b/packages/docs-nextra/components/doenet.tsx
@@ -17,11 +17,22 @@ export function DoenetViewer({
 export function DoenetEditor({
     source,
     showFormatter = false,
-}: React.PropsWithChildren<{ source: string; showFormatter?: boolean }>) {
-    console.log("source for editor", JSON.stringify(source));
+    viewerLocation = "right",
+    height = "500px",
+}: React.PropsWithChildren<{
+    source: string;
+    showFormatter?: boolean;
+    viewerLocation?: "left" | "right" | "top" | "bottom";
+    height?: string;
+}>) {
     return (
         <div className="doenet-editor-container">
-            <DoenetEditorOrig doenetML={source} showFormatter={showFormatter} />
+            <DoenetEditorOrig
+                doenetML={source}
+                showFormatter={showFormatter}
+                viewerLocation={viewerLocation}
+                height={height}
+            />
         </div>
     );
 }
diff --git a/packages/docs-nextra/next.config.mjs b/packages/docs-nextra/next.config.mjs
index c2107d582..1c8b2108e 100644
--- a/packages/docs-nextra/next.config.mjs
+++ b/packages/docs-nextra/next.config.mjs
@@ -3,6 +3,7 @@ import {
     autoInsertAttrPropDescriptions,
     wrapDoenetExample,
     wrapDoenetEditor,
+    wrapDoenetEditorHorizontal,
     wrapDoenetViewer,
 } from "./dist/index.js";
 import { getHighlighter, bundledLanguages, bundledThemes } from "shiki";
@@ -67,6 +68,7 @@ const withNextra = nextraConfig({
             autoInsertAttrPropDescriptions,
             wrapDoenetExample,
             wrapDoenetEditor,
+            wrapDoenetEditorHorizontal,
             wrapDoenetViewer,
         ],
         rehypePlugins: [
diff --git a/packages/docs-nextra/pages/tutorials/intermediateTutorial/iT2-4-properties.mdx b/packages/docs-nextra/pages/tutorials/intermediateTutorial/iT2-4-properties.mdx
index ea3ff48dd..6809d9c53 100644
--- a/packages/docs-nextra/pages/tutorials/intermediateTutorial/iT2-4-properties.mdx
+++ b/packages/docs-nextra/pages/tutorials/intermediateTutorial/iT2-4-properties.mdx
@@ -100,21 +100,7 @@ The following code demonstrates the use of array notation and properties with gr
 Below the graph, you'll find references to the `endpoints` property of both line segements, as well as individual references to specific data from the `endpoints` property list (see lines 10-11).
 
 
-<DoenetEditor source ={`
-<graph size="small">
-  <lineSegment name= "line1" endpoints="(-8,-8) (-8,8)" />
- 
-  <lineSegment name= "line2" endpoints="(6,6) (7,-5)" />
-  $line2.endpoints
-</graph>
- 
-<p>Endpoints of <c>line1</c>: $line1.endpoints</p>
-<p>Endpoints of <c>line2</c>: $line2.endpoints</p>
-<p>First endpoint of <c>line2</c>: $line2.endpoints[1]</p>
-<p>Second endpoint of <c>line2</c>, first element (x): $line2.endpoints[2][1]</p>
-`} />
-
-```doenet-editor
+```doenet-editor-horiz
 <graph size="small">
   <lineSegment name= "line1" endpoints="(-8,-8) (-8,8)" />
  
diff --git a/packages/docs-nextra/pages/tutorials/quickStart/quickStart-1.mdx b/packages/docs-nextra/pages/tutorials/quickStart/quickStart-1.mdx
index 5ffaa67e5..0881afd48 100644
--- a/packages/docs-nextra/pages/tutorials/quickStart/quickStart-1.mdx
+++ b/packages/docs-nextra/pages/tutorials/quickStart/quickStart-1.mdx
@@ -15,7 +15,7 @@ This tutorial covers a sample project in 5 parts; each part is about 5-10 minute
 
 # Part 1: Creating a Doenet Account & Starting an Activity
 
-<DoenetViewer source={`
+```doenet-viewer
 <figure>
   <video youtube="krWLDxG7KSY"/>
   <caption>How to create a Doenet account</caption>
@@ -61,8 +61,6 @@ This tutorial covers a sample project in 5 parts; each part is about 5-10 minute
   </ul>
 <image source='doenet:cid=bafkreiew7b333mt3no7cbkzsnle7nqumwscg54pwkvgk76fzhbs5mjpaim' description='doenet make activity public' asfilename='Screenshot 2023-06-10 at 1.03.13 AM.png' width='400' aspectRatio="400/383"  mimeType='image/png' />  
 </section>
-`}
-/>
-
+```
 
 
diff --git a/packages/docs-nextra/pages/tutorials/quickStart/quickStart-2.mdx b/packages/docs-nextra/pages/tutorials/quickStart/quickStart-2.mdx
index de9d7724e..ad5fc6df5 100644
--- a/packages/docs-nextra/pages/tutorials/quickStart/quickStart-2.mdx
+++ b/packages/docs-nextra/pages/tutorials/quickStart/quickStart-2.mdx
@@ -20,25 +20,22 @@ Click the “Update” button in the upper-left corner to see the title rendered
 
 The first thing I’d like to do in this activity is ask the students what they know about the formula for the area of a circle, since it will come up in the constructions later on. I’ll first create a paragraph of text using the `<p>` tag,
 
-<DoenetEditor source={`
+```doenet-editor
 <p>Let’s review what we know about circles…</p>
 
 <p>What is the formula for the area of a circle?</p>
-`}
-/>
-
+```
 Now, I’d like to show the left-hand side of the equation in mathematical display text, and have the student complete the right-hand side of the equation. To do that, I’ll create another paragraph, and within this `<p>` I'll place an `<m>` tag for the mathematical display text; an `<m>` tag accepts LateX as input.
 
 
 
 It’s important to always close off an `<m>` tag before starting an `<answer>` tag, which is what I’ll use to collect and evaluate the student’s response. The simplest way to evaluate an answer is to place the mathematically correct response between the opening and closing `<answer>` tags. 
 
-<DoenetEditor source={`
+```doenet-editor
 <p><m>A = </m> 
     <answer>pi r^2</answer>
 </p>
-`}
-/>
+```
 
 Now, let’s click update and test out that  the `<answer>` tag is working as expected.
 
@@ -46,23 +43,20 @@ Hopefully everything is working for you up to this point. Try testing out differ
 
 However, what if we are starting to be concerned about the student using the correct variable for $r$? We can include a hint guiding the student to the correct choice of variable using the `<hint>` tag:
 
-<DoenetEditor source={`
+```doenet-editor
 <hint>Use <m>r</m> for the circle's radius.</hint>
-`}
-/>
+```
 
 Last, perhaps I also want to give credit to student responses that use the diameter of the circle as the defining variable. I will update my `<answer>` tag by giving it two `<award>` children. The first `<award>` will give credit to students who enter the equation in terms of $r$, and the second `<award>` will give credit for responses in terms of $d$.
 
-<DoenetEditor source={`
+```doenet-editor
 <p>What is the formula for the area of a circle?</p>
 <p><m>A = </m>
   <answer>
     <award>pi r^2</award>
     <award>pi d^2 / 4</award>
   </answer></p>
-`}
-/>
-
+```
 
 Now, I’ll update the hint to also give the correct variable to use for the diameter.
 
diff --git a/packages/docs-nextra/scripts/wrap-doenet-editor.ts b/packages/docs-nextra/scripts/wrap-doenet-editor.ts
index 45def701d..e2572954c 100644
--- a/packages/docs-nextra/scripts/wrap-doenet-editor.ts
+++ b/packages/docs-nextra/scripts/wrap-doenet-editor.ts
@@ -19,10 +19,53 @@ export const wrapDoenetEditor: Plugin<void[], MdastRoot, MdastRoot> =
                     return;
                 }
 
-                console.log(
-                    "value for wrapped editor",
-                    JSON.stringify(node.value),
-                );
+                const newNode: MdxJsxFlowElement = {
+                    type: "mdxJsxFlowElement",
+                    name: "DoenetEditor",
+                    attributes: [
+                        {
+                            type: "mdxJsxAttribute",
+                            name: "source",
+                            value: {
+                                type: "mdxJsxAttributeValueExpression",
+                                value: JSON.stringify(node.value),
+                                data: { estree: objectToEstree(node.value) },
+                            },
+                        },
+                        {
+                            type: "mdxJsxAttribute",
+                            name: "viewerLocation",
+                            value: "bottom",
+                        },
+                        {
+                            type: "mdxJsxAttribute",
+                            name: "height",
+                            value: "600px",
+                        },
+                    ],
+                    children: [],
+                };
+
+                // Override the original node with the new one.
+                Object.assign(node, newNode);
+            });
+        };
+    };
+
+/**
+ * Wraps codeblocks of type `doenet-editor-horiz` with a JSX element that renders the editor with the output
+ * where the editor defaults to being at the left.
+ */
+export const wrapDoenetEditorHorizontal: Plugin<void[], MdastRoot, MdastRoot> =
+    function () {
+        return (tree) => {
+            visit(tree, (node) => {
+                if (node?.type !== "code") {
+                    return;
+                }
+                if (node.lang !== "doenet-editor-horiz") {
+                    return;
+                }
 
                 const newNode: MdxJsxFlowElement = {
                     type: "mdxJsxFlowElement",
@@ -37,6 +80,16 @@ export const wrapDoenetEditor: Plugin<void[], MdastRoot, MdastRoot> =
                                 data: { estree: objectToEstree(node.value) },
                             },
                         },
+                        {
+                            type: "mdxJsxAttribute",
+                            name: "viewerLocation",
+                            value: "right",
+                        },
+                        {
+                            type: "mdxJsxAttribute",
+                            name: "height",
+                            value: "500px",
+                        },
                     ],
                     children: [],
                 };
diff --git a/packages/docs-nextra/scripts/wrap-doenet-viewer.ts b/packages/docs-nextra/scripts/wrap-doenet-viewer.ts
index de911ce7f..3ba38d2c7 100644
--- a/packages/docs-nextra/scripts/wrap-doenet-viewer.ts
+++ b/packages/docs-nextra/scripts/wrap-doenet-viewer.ts
@@ -5,7 +5,7 @@ import { Root as MdastRoot } from "mdast";
 import { MdxJsxFlowElement } from "./types";
 
 /**
- * Wraps codeblocks of type `doenet-editor` with a JSX element that renders the output.
+ * Wraps codeblocks of type `doenet-viewer` with a JSX element that renders the output.
  */
 export const wrapDoenetViewer: Plugin<void[], MdastRoot, MdastRoot> =
     function () {