From 67ca83ff16cf29879cbb2a02b25d613fa8ee0f56 Mon Sep 17 00:00:00 2001
From: Jeff Avallone <jeff.avallone@gmail.com>
Date: Tue, 29 Jan 2019 17:48:14 -0500
Subject: [PATCH] Updating demos

---
 src/syntax/js.js   | 53 +++++++++++++++++++++++++++++++---------------
 src/syntax/pcre.js | 53 +++++++++++++++++++++++++++++++---------------
 2 files changed, 72 insertions(+), 34 deletions(-)

diff --git a/src/syntax/js.js b/src/syntax/js.js
index de69be5..c371b46 100644
--- a/src/syntax/js.js
+++ b/src/syntax/js.js
@@ -17,27 +17,46 @@ const parse = expr => {
           {
             type: 'Box',
             props: {
-              theme: 'literal'
+              theme: 'capture',
+              label: 'Demo rendering',
+              useAnchors: true
             },
             children: [
               {
-                type: 'Text',
+                type: 'HorizontalLayout',
+                props: {
+                  withConnectors: true
+                },
                 children: [
-                  'JS'
-                ]
-              }
-            ]
-          },
-          {
-            type: 'Box',
-            props: {
-              theme: 'literal'
-            },
-            children: [
-              {
-                type: 'Text',
-                children: [
-                  expr
+                  {
+                    type: 'Box',
+                    props: {
+                      theme: 'literal'
+                    },
+                    children: [
+                      {
+                        type: 'Text',
+                        children: [
+                          'JS'
+                        ]
+                      }
+                    ]
+                  },
+                  {
+                    type: 'Box',
+                    props: {
+                      theme: 'literal',
+                      label: 'Expression'
+                    },
+                    children: [
+                      {
+                        type: 'Text',
+                        children: [
+                          expr
+                        ]
+                      }
+                    ]
+                  }
                 ]
               }
             ]
diff --git a/src/syntax/pcre.js b/src/syntax/pcre.js
index 37795ce..1ba9f6b 100644
--- a/src/syntax/pcre.js
+++ b/src/syntax/pcre.js
@@ -17,27 +17,46 @@ const parse = expr => {
           {
             type: 'Box',
             props: {
-              theme: 'literal'
+              theme: 'capture',
+              label: 'Demo rendering',
+              useAnchors: true
             },
             children: [
               {
-                type: 'Text',
+                type: 'HorizontalLayout',
+                props: {
+                  withConnectors: true
+                },
                 children: [
-                  'PCRE'
-                ]
-              }
-            ]
-          },
-          {
-            type: 'Box',
-            props: {
-              theme: 'literal'
-            },
-            children: [
-              {
-                type: 'Text',
-                children: [
-                  expr
+                  {
+                    type: 'Box',
+                    props: {
+                      theme: 'literal'
+                    },
+                    children: [
+                      {
+                        type: 'Text',
+                        children: [
+                          'PCRE'
+                        ]
+                      }
+                    ]
+                  },
+                  {
+                    type: 'Box',
+                    props: {
+                      theme: 'literal',
+                      label: 'Expression'
+                    },
+                    children: [
+                      {
+                        type: 'Text',
+                        children: [
+                          expr
+                        ]
+                      }
+                    ]
+                  }
                 ]
               }
             ]