Add support for plain code blocks (#2)

README.md

@@ -93,16 +93,12 @@ When a list item contains multiple children the annotation is attached to the ch
   <summary>Code</summary>
 
 ````markdown
-```php {{ title: 'Example' }}
-echo 'Hello, world!';
+```{{ title: 'Example' }}
+Hello, world!
 ```
-````
-
-**You must specify a language when annotating a code block.** For plain text you may be able to use any value that doesn't match a valid language, such as `plain`, `text`, or `none`:
 
-````markdown
-```text {{ title: 'Example' }}
-Hello, world!
+```php {{ title: 'Example' }}
+echo 'Hello, world!';
 ```
 ````
 

index.js

@@ -14,10 +14,22 @@ export const mdxAnnotations = {
   remark() {
     return (tree) => {
       unistVisit(tree, (node, nodeIndex, parentNode) => {
-        if (node.type === 'code' && /^{\s*{.*?}\s*}$/.test(node.meta)) {
-          setAnnotation(node, node.meta.slice(1, -1))
-          node.meta = null
-          return
+        if (node.type === 'code') {
+          let meta = node.meta ?? ''
+          let lang
+          let annotationIndex = node.lang?.match(/{\s*{/)?.index
+          if (typeof annotationIndex === 'number') {
+            lang = node.lang.slice(0, annotationIndex) || null
+            meta = `${node.lang.slice(annotationIndex)}${meta}`
+          }
+          if (/^{\s*{.*?}\s*}$/.test(meta)) {
+            setAnnotation(node, meta.slice(1, -1))
+            node.meta = null
+            if (typeof lang !== 'undefined') {
+              node.lang = lang
+            }
+            return
+          }
         }
 
         if (node.type === 'tableRow') {

package.json

@@ -28,7 +28,7 @@
     "test": "node test.js"
   },
   "devDependencies": {
-    "@mdx-js/mdx": "^2.2.1",
+    "@mdx-js/mdx": "^2.3.0",
     "remark-gfm": "^3.0.1",
     "uvu": "^0.5.6"
   },

test.js

@@ -21,6 +21,12 @@ test('it works', async () => {
       "- Hello {{ foo: 'bar' }}",
       "- Hello {{ foo: 'bar' }}\n\n  World",
       "```php {{ foo: 'bar' }}\necho '';\n```",
+      "```php{{ foo: 'bar' }}\necho '';\n```",
+      "```php {  { foo: 'bar' } }\necho '';\n```",
+      "```{{foo:'bar'}}\nHello world\n```",
+      "``` {{foo:'bar'}}\nHello world\n```",
+      "```{{ foo: 'bar' }}\nHello world\n```",
+      "``` {{ foo: 'bar' }}\nHello world\n```",
       "Hello **world**{{ foo: 'bar' }}",
       "Hello _world_{{ foo: 'bar' }}",
       "Hello `world`{{ foo: 'bar' }}",
@@ -78,6 +84,50 @@ function _createMdxContent(props) {
       ...{
         foo: 'bar'
       }
+    }), "\\n", _jsx(_components.pre, {
+      children: _jsx(_components.code, {
+        className: "language-php",
+        children: "echo '';\\n"
+      }),
+      ...{
+        foo: 'bar'
+      }
+    }), "\\n", _jsx(_components.pre, {
+      children: _jsx(_components.code, {
+        className: "language-php",
+        children: "echo '';\\n"
+      }),
+      ...{
+        foo: 'bar'
+      }
+    }), "\\n", _jsx(_components.pre, {
+      children: _jsx(_components.code, {
+        children: "Hello world\\n"
+      }),
+      ...{
+        foo: 'bar'
+      }
+    }), "\\n", _jsx(_components.pre, {
+      children: _jsx(_components.code, {
+        children: "Hello world\\n"
+      }),
+      ...{
+        foo: 'bar'
+      }
+    }), "\\n", _jsx(_components.pre, {
+      children: _jsx(_components.code, {
+        children: "Hello world\\n"
+      }),
+      ...{
+        foo: 'bar'
+      }
+    }), "\\n", _jsx(_components.pre, {
+      children: _jsx(_components.code, {
+        children: "Hello world\\n"
+      }),
+      ...{
+        foo: 'bar'
+      }
     }), "\\n", _jsxs(_components.p, {
       children: ["Hello ", _jsx(_components.strong, {
         children: "world",