neo.mjs 10.0.0-alpha.5 → 10.0.0-beta.1

package/apps/portal/resources/data/examples_dist_prod.json

@@ -1,145 +1,144 @@
 [{
     "id"          : 24,
     "environments": ["Desktop", "Mobile"],
-    "image"       : "devmode/liquid-glass.png",
-    "name"        : "Liquid Glass effect",
-    "sourceUrl"   : "https://github.com/neomjs/liquid-glass-demo/blob/main/apps/myapp/view/GlassComponent.mjs",
-    "url"         : "https://neomjs.github.io/pages2/workspace/neo-liquid-glass-demo/dist/production/apps/myapp/index.html"
-}, {
-    "id"          : 23,
-    "environments": ["Desktop", "Mobile"],
     "image"       : "devmode/bigData.png",
     "name"        : "Buffered Data Grid with 5M cells",
     "sourceUrl"   : "examples/grid/bigData",
     "url"         : "dist/production/examples/grid/bigData/index.html"
 }, {
-    "id"           : 22,
+    "id"           : 23,
     "image"        : "devmode/sharedcovid.png",
     "name"         : "Multi Window Covid App",
     "sharedWorkers": true,
     "sourceUrl"    : "apps/sharedcovid",
     "url"          : "dist/production/apps/sharedcovid/index.html#mainview=table"
 }, {
-    "id"       : 21,
+    "id"       : 22,
     "image"    : "devmode/calendar-preview.png",
     "name"     : "Calendar",
     "sourceUrl": "src/calendar",
     "url"      : "dist/production/examples/calendar/basic/index.html"
 }, {
-    "id"       : 20,
+    "id"       : 21,
     "image"    : "devmode/helix.png",
     "name"     : "component.Helix",
     "sourceUrl": "examples/component/helix",
     "url"      : "dist/production/examples/component/helix/index.html"
 }, {
-    "id"           : 19,
+    "id"           : 20,
     "image"        : "devmode/mwCoronaGallery.png",
     "name"         : "Multi Window Covid Gallery",
     "sharedWorkers": true,
     "sourceUrl"    : "examples/component/multiWindowCoronaGallery",
     "url"          : "dist/production/examples/component/multiWindowCoronaGallery/index.html"
 }, {
-    "id"       : 18,
+    "id"       : 19,
     "image"    : "devmode/offscreenCanvas.png",
     "name"     : "OffscreenCanvas",
     "sourceUrl": "https://github.com/neomjs/offscreen-canvas/tree/main/apps/myapp",
     "url"      : "https://neomjs.github.io/pages2/workspace/neo-offscreen-canvas-demo/dist/production/apps/myapp/index.html"
 }, {
-    "id"           : 17,
+    "id"           : 18,
     "image"        : "devmode/sharedOffscreenCanvas.png",
     "name"         : "Multi-Window OffscreenCanvas",
     "sharedWorkers": true,
     "sourceUrl"    : "https://github.com/neomjs/shared-offscreen",
     "url"          : "https://neomjs.github.io/pages2/workspace/neo-shared-offscreen-canvas-demo/dist/production/apps/mainapp/index.html"
 }, {
-    "id"           : 16,
+    "id"           : 17,
     "image"        : "devmode/multi_window_dd.png",
     "name"         : "Multi-Window Drag&Drop",
     "sharedWorkers": true,
     "sourceUrl"    : "apps/shareddialog",
     "url"          : "dist/production/apps/shareddialog/index.html"
 }, {
-    "id"       : 15,
+    "id"       : 16,
     "image"    : "devmode/tabContainer.png",
     "name"     : "tab.Container",
     "sourceUrl": "examples/tab/container",
     "url"      : "dist/production/examples/tab/container/index.html"
 }, {
-    "id"       : 14,
+    "id"       : 15,
     "image"    : "devmode/model-component-example.png",
     "name"     : "State Provider Example",
     "sourceUrl": "examples/stateProvider/advanced",
     "url"      : "dist/production/examples/stateProvider/advanced/index.html"
 }, {
-    "id"       : 13,
+    "id"       : 14,
     "image"    : "devmode/dragdrop.png",
     "name"     : "Dialog drag&drop",
     "sourceUrl": "examples/dialog",
     "url"      : "dist/production/examples/dialog/"
 }, {
-    "id"           : 12,
+    "id"           : 13,
     "image"        : "dist_prod/colorsApp.png",
     "name"         : "Colors Dashboard",
     "sharedWorkers": true,
     "sourceUrl"    : "apps/colors",
     "url"          : "dist/production/apps/colors/index.html"
 }, {
-    "id"       : 11,
+    "id"       : 12,
     "image"    : "devmode/covidDashboard.png",
     "name"     : "Covid Dashboard",
     "sourceUrl": "apps/covid",
     "url"      : "dist/production/apps/covid/index.html#mainview=table"
 }, {
-    "id"       : 10,
+    "id"       : 11,
     "image"    : "devmode/coronaHelix.png",
     "name"     : "COVID-19 Helix",
     "sourceUrl": "examples/component/coronaHelix",
     "url"      : "dist/production/examples/component/coronaHelix/index.html"
 }, {
-    "id"       : 9,
+    "id"       : 10,
     "image"    : "devmode/coronaGallery.png",
     "name"     : "COVID-19 Gallery",
     "sourceUrl": "examples/component/coronaGallery",
     "url"      : "dist/production/examples/component/coronaGallery/index.html"
 }, {
-    "id"       : 8,
+    "id"       : 9,
     "image"    : "devmode/gallery.png",
     "name"     : "component.Gallery",
     "sourceUrl": "examples/component/gallery",
     "url"      : "dist/production/examples/component/gallery/index.html"
 }, {
-    "id"       : 7,
+    "id"       : 8,
     "image"    : "devmode/tableFiltering.png",
     "name"     : "Table Filtering",
     "sourceUrl": "examples/tableFiltering",
     "url"      : "dist/production/examples/tableFiltering/"
 }, {
-    "id"       : 6,
+    "id"       : 7,
     "image"    : "devmode/dateSelector.png",
     "name"     : "component.DateSelector",
     "sourceUrl": "examples/component/dateSelector",
     "url"      : "dist/production/examples/component/dateSelector/index.html"
 }, {
-    "id"       : 5,
+    "id"       : 6,
     "image"    : "devmode/dateField.png",
     "name"     : "form.field.Date",
     "sourceUrl": "examples/form/field/date",
     "url"      : "dist/production/examples/form/field/date/index.html"
 }, {
-    "id"       : 4,
+    "id"       : 5,
     "image"    : "devmode/selectField.png",
     "name"     : "form.field.ComboBox",
     "sourceUrl": "examples/form/field/combobox",
     "url"      : "dist/production/examples/form/field/combobox/index.html"
 }, {
-    "id"           : 3,
+    "id"           : 4,
     "environments" : ["Desktop", "Mobile"],
     "image"        : "dist_prod/portalApp.png",
     "name"         : "Portal App",
     "sharedWorkers": true,
     "sourceUrl"    : "apps/portal",
     "url"          : "dist/production/apps/portal/index.html"
-}, {
+},{
+    "id"       : 3,
+    "image"    : "devmode/liquid-glass.png",
+    "name"     : "Liquid Glass effect",
+    "sourceUrl": "https://github.com/neomjs/liquid-glass-demo/blob/main/apps/myapp/view/GlassComponent.mjs",
+    "url"      : "https://neomjs.github.io/pages2/workspace/neo-liquid-glass-demo/dist/production/apps/myapp/index.html"
+}, , {
     "hidden"   : true,
     "id"       : 2,
     "image"    : "devmode/realworldApp.png",

package/apps/portal/view/home/FooterContainer.mjs

@@ -107,7 +107,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                html  : 'v10.0.0-alpha.5'
+                html  : 'v10.0.0-beta.1'
             }]
         }],
         /**

package/apps/portal/view/learn/ContentComponent.mjs

@@ -5,9 +5,9 @@ import {marked}    from '../../../../node_modules/marked/lib/marked.esm.js';
 const
     labCloseRegex        = /<!--\s*\/lab\s*-->/g,
     labOpenRegex         = /<!--\s*lab\s*-->/g,
-    preLivePreviewRegex  = /<pre\s+data-code-livepreview\s*>([\s\S]*?)<\/pre>/g,
-    preJsRegex           = /<pre\s+data-code-readonly\s*>([\s\S]*?)<\/pre>/g,
-    preNeoComponentRegex = /<pre\s+data-neo-component\s*>([\s\S]*?)<\/pre>/g;
+    regexLivePreview     = /```(javascript|html|css|json)\s+live-preview\s*\n([\s\S]*?)\n```/g,
+    regexNeoComponent    = /```json\s+neo-component\s*\n([\s\S]*?)\n```/g,
+    regexReadonly        = /```(javascript|html|css|json)\s+readonly\s*\n([\s\S]*?)\n```/g;
 
 /**
  * @class Portal.view.learn.ContentComponent
@@ -164,48 +164,48 @@ class ContentComponent extends Component {
             {appName, windowId} = me,
             path                = me.getStateProvider().getData('contentPath'),
             pagesFolder         = path.includes('/learn/') ? '' : 'pages/',
-            baseConfigs, content, data, html, instance, modifiedHtml, neoComponents, neoDivs;
+            baseConfigs, content, data, html, instance, neoComponents, neoDivs;
 
         path += `${pagesFolder + record.id.replaceAll('.', '/')}.md`;
 
         if (record.isLeaf && path) {
-            baseConfigs   = {appName, autoMount: true, autoRender: true, parentComponent: me, windowId};
-            data          = await fetch(path);
-            content       = await data.text();
-            content       = me.updateContentSectionsStore(content); // also replaces ## with h2 tags
-            content       = `<h1 class='neo-h1'>${record.name}</h1>\n${content}`;
-            modifiedHtml  = await me.highlightPreContent(content);
+            baseConfigs = {appName, autoMount: true, autoRender: true, parentComponent: me, windowId};
+            data        = await fetch(path);
+            content     = await data.text();
+            // Update content sections (modifies markdown content with h2/h3 tags and IDs)
+            content = me.updateContentSectionsStore(content);
+            content = `<h1 class='neo-h1'>${record.name}</h1>\n${content}`;
+            // Initialize maps for custom components and live previews
             neoComponents = {};
             neoDivs       = {};
-
-            // Replace <pre neo-component></pre> with <div id='neo-component-x'/>
-            // and create a map keyed by ID, whose value is the javascript
-            // from the <pre>
-            modifiedHtml = me.extractNeoComponents(modifiedHtml, neoComponents);
-
-            // Replace <pre data-neo></pre> with <div id='neo-preview-1'/>
-            // and create a map keyed by ID, whose value is the javascript
-            // from the <pre>
-            modifiedHtml = me.extractLivePreviewContent(modifiedHtml, neoDivs);
-
-            html = marked.parse(modifiedHtml);
-            html = me.insertLabDivs(html);
-
-            me.toggleCls('lab', record.name?.startsWith('Lab:'));
-
-            me.html = html;
+            // Process custom Neo.mjs component blocks (synchronous)
+            content = me.processNeoComponentsBlocks(content, neoComponents);
+            // Process custom Live Preview blocks (synchronous)
+            content = me.processLivePreviewBlocks(content, neoDivs);
+            // Process custom Readonly Code blocks (asynchronous due to HighlightJS)
+            // This will replace the markdown fenced block with the highlighted HTML <pre> tag.
+            content = await me.processReadonlyCodeBlocks(content, windowId);
+            // Parse the (now modified) markdown content into HTML
+            // This content string now contains standard markdown PLUS the HTML divs/pres we injected.
+            html = marked.parse(content);
+            // Insert lab divs (these are markdown comments, so process on the final HTML)
+            html = me.insertLabDivs(html); // Keep existing method
+
+            me.toggleCls('lab', record.name?.startsWith('Lab:')); // Keep existing method
+
+            me.html = html; // Set the component's HTML
 
             await me.timeout(Neo.config.environment === 'development' ? 100 : 150);
 
+            // Create instances for custom components and live previews (keep existing logic)
             Object.keys(neoComponents).forEach(key => {
                 instance = Neo.create({
                     ...baseConfigs,
-                    className: 'Neo.component.Base',
+                    className: 'Neo.component.Base', // Adjust if specific component classes are implied by JSON
                     parentId : key,
                     ...neoComponents[key]
                 });
-
-                me.customComponents.push(instance)
+                me.customComponents.push(instance);
             });
 
             Object.keys(neoDivs).forEach(key => {
@@ -213,10 +213,9 @@ class ContentComponent extends Component {
                     ...baseConfigs,
                     module  : LivePreview,
                     parentId: key,
-                    value   : neoDivs[key]
+                    value   : neoDivs[key].code // Pass the extracted code content
                 });
-
-                me.livePreviews.push(instance)
+                me.livePreviews.push(instance);
             });
 
             Neo.main.addon.IntersectionObserver.observe({
@@ -224,87 +223,10 @@ class ContentComponent extends Component {
                 id        : me.id,
                 observe   : ['.neo-h2', '.neo-h3'],
                 windowId  : me.windowId
-            })
+            });
         }
     }
 
-    /**
-     * @param {String} htmlString
-     * @param {Object} map
-     * @returns {String}
-     */
-    extractNeoComponents(htmlString, map) {
-        // 1. Replace <pre data-neo-component> with <div id='neo-learn-content-component-x'/>
-        // and update map with key/value pairs, where the key is the ID and the value is the <pre> contents.
-        // Replace the content with tokens, and create a promise to update the corresponding content
-        return htmlString.replace(preNeoComponentRegex, (match, preContent) => {
-            const key = Neo.core.IdGenerator.getId('learn-content-component');
-            map[key] = JSON.parse(preContent);
-            return `<div id="${key}"></div>`
-        })
-    }
-
-    /**
-     * @param {String} htmlString
-     * @param {Object} map
-     * @returns {String}
-     */
-    extractLivePreviewContent(htmlString, map) {
-        // 1. Replace <pre data-neo> with <div id='neo-pre-live-preview-x'/>
-        // and update map with key/value pairs, where the key is the ID and the value is the <pre> contents.
-        // Replace the content with tokens, and create a promise to update the corresponding content
-        return htmlString.replace(preLivePreviewRegex, (match, preContent) => {
-            const key = Neo.core.IdGenerator.getId('pre-live-preview');
-            map[key] = preContent;
-            return `<div id="${key}"></div>`
-        })
-    }
-
-    /**
-     * @param preContent
-     * @param token
-     * @param id
-     * @returns {Object}
-     */
-    getHighlightPromise(preContent, token, id) {
-        // Resolves to an object of the form {after, token}, where after is the updated <pre> tag content
-        return Neo.main.addon.HighlightJS.highlightAuto({html: preContent, windowId: this.windowId})
-            .then(value => ({after: `<pre data-javascript id="${id}">${value}</pre>`, token}))
-    }
-
-    /**
-     * @param {String} htmlString
-     * @returns {Promise<*>}
-     */
-    async highlightPreContent(htmlString) {
-        // 1. Replace <pre data-javascript> with unique tokens and create a HighlightJS.highlightAuto promise for each
-        // 2. When all promises are resolved, use their values to replace the tokens.
-
-        // Note that if we were to import HighlightJS directly, we wouldn't need all this async code.
-
-        // Create an array to store promises for each replacement
-        const replacementPromises = [];
-        let count = 0;
-
-        // Replace the content with tokens, and create a promise to update the corresponding content
-        let updatedHtml = htmlString.replace(preJsRegex, (match, preContent) => {
-            const token = `__NEO-PRE-TOKEN-${++count}__`;
-            replacementPromises.push(this.getHighlightPromise(preContent, token, `pre-preview-${Neo.core.IdGenerator.getId()}`));
-            return token
-        });
-
-        // Assert: updateHtml is the original, but with <pre data-javascript> replaced with tokens.
-
-        // Wait for all replacement promises to resolve
-        let replacements = await Promise.all(replacementPromises)
-
-        // Replace each token with the resolved content
-        replacements.forEach((replacement) => updatedHtml = updatedHtml.replace(replacement.token, replacement.after));
-
-        // Return the final updated HTML string
-        return updatedHtml
-    }
-
     /**
      * @param {String} inputString
      * @returns {String}
@@ -335,6 +257,75 @@ class ContentComponent extends Component {
         }
     }
 
+    /**
+     * Extracts live preview code blocks from Markdown content before marked.js parsing.
+     * Replaces them with HTML placeholders.
+     * @param {String} contentString The raw Markdown content string.
+     * @param {Object} map A map to store the extracted code content keyed by placeholder ID.
+     * @returns {String} The modified Markdown content string with placeholders.
+     */
+    processLivePreviewBlocks(contentString, map) {
+        return contentString.replace(regexLivePreview, (match, language, code) => {
+            const key = Neo.core.IdGenerator.getId('pre-live-preview');
+            map[key] = {code, language};
+            return `<div id="${key}"></div>`
+        })
+    }
+
+    /**
+     * Extracts Neo.mjs component config blocks from Markdown content before marked.js parsing.
+     * Replaces them with HTML placeholders.
+     * @param {String} contentString The raw Markdown content string.
+     * @param {Object} map A map to store the extracted JSON config keyed by placeholder ID.
+     * @returns {String} The modified Markdown content string with placeholders.
+     */
+    processNeoComponentsBlocks(contentString, map) {
+        return contentString.replace(regexNeoComponent, (match, code) => {
+            const key = Neo.core.IdGenerator.getId('learn-content-component');
+            map[key] = JSON.parse(code);
+            return `<div id="${key}"></div>`
+        })
+    }
+
+    /**
+     * Highlights readonly code blocks using HighlightJS.
+     * Replaces the Markdown fenced block with the highlighted HTML <pre> tag.
+     * @param {String} contentString The raw Markdown content string.
+     * @param {String} windowId The ID of the current window for HighlightJS.
+     * @returns {Promise<String>} A promise that resolves to the modified Markdown string with highlighted HTML.
+     */
+    async processReadonlyCodeBlocks(contentString, windowId) {
+        let replacementPromises = [],
+            count               = 0,
+            replacements;
+
+        // Replace the content with tokens, and create a promise to update the corresponding content
+        let updatedContent = contentString.replace(regexReadonly, (match, language, code) => {
+            const token = `__NEO-READONLY-TOKEN-${++count}__`;
+            // Call HighlightJS.highlightAuto for each block.
+            // The result will be HTML. We'll wrap it in a <pre data-javascript> later.
+            replacementPromises.push(
+                Neo.main.addon.HighlightJS.highlightAuto({html: code, windowId})
+                    .then(highlightedHtml => ({
+                        after: `<pre data-javascript id="pre-readonly-${Neo.core.IdGenerator.getId()}">${highlightedHtml}</pre>`,
+                        token: token
+                    }))
+            );
+
+            return token; // Replace the original Markdown block with a temporary token
+        });
+
+        // Wait for all highlighting promises to resolve
+        replacements = await Promise.all(replacementPromises);
+
+        // Replace each token with the resolved highlighted HTML content
+        replacements.forEach(replacement => {
+            updatedContent = updatedContent.replace(replacement.token, replacement.after)
+        });
+
+        return updatedContent
+    }
+
     /**
      * Updates the contentSections VM store and replaces ## with h2 tags
      * @param {String} content

package/examples/table/cellEditing/MainContainer.mjs

@@ -113,7 +113,7 @@ class MainContainer extends ConfigurationViewport {
             parentId   : this.id,
             store      : MainStore,
 
-            viewConfig: {
+            bodyConfig: {
                 selectionModel: CellModel
             },
 

package/examples/table/container/MainContainer.mjs

@@ -115,7 +115,7 @@ class MainContainer extends ConfigurationViewport {
             id   : 'myTableStoreContainer',
             store: MainStore,
 
-            viewConfig: {
+            bodyConfig: {
                 selectionModel: CellModel
             },
 
@@ -139,7 +139,7 @@ class MainContainer extends ConfigurationViewport {
                                 text    : 'Edit'
                             }));
 
-                        me.view.updateDepth = -1;
+                        me.body.updateDepth = -1;
 
                         return button.createVdomReference()
                     }
@@ -168,7 +168,7 @@ class MainContainer extends ConfigurationViewport {
                                 }
                             }));
 
-                        me.view.updateDepth = -1;
+                        me.body.updateDepth = -1;
 
                         return button.createVdomReference()
                     }

package/examples/table/nestedRecordFields/Viewport.mjs

@@ -40,17 +40,17 @@ class Viewport extends BaseViewport {
             module: TableContainer,
             bind  : {store : 'stores.mainStore'},
 
+            bodyConfig: {
+                highlightModifiedCells: true
+            },
+
             columns: [
                 {dataField: 'user.firstname', text: 'Firstname'},
                 {dataField: 'user.lastname',  text: 'Lastname'},
                 {dataField: 'githubId',       text: 'Github Id'},
                 {dataField: 'country',        text: 'Country',     renderer: 'up.countryRenderer'},
                 {dataField: 'edit',           text: 'Edit Action', renderer: 'up.editRenderer'}
-            ],
-
-            viewConfig: {
-                highlightModifiedCells: true
-            }
+            ]
         }]
     }
 
@@ -118,7 +118,7 @@ class Viewport extends BaseViewport {
                 windowId
             }));
 
-        me.view.updateDepth = -1;
+        me.body.updateDepth = -1;
 
         return button.createVdomReference()
     }

package/examples/tableFiltering/MainContainer.mjs

@@ -46,10 +46,10 @@ class MainContainer extends Viewport {
             }]
         }, {
             module           : TableContainer,
+            bodyConfig       : {selectionModel: CellModel},
             id               : 'myTableFilterContainer',
             showHeaderFilters: true,
             store            : MainStore,
-            viewConfig       : {selectionModel: CellModel},
             width            : '100%',
             wrapperStyle     : {height: '300px'},
 

package/examples/tablePerformance/MainContainer.mjs

@@ -72,8 +72,8 @@ class MainContainer extends Container {
             }]
         }, {
             module    : TableContainer,
+            bodyConfig: {useRowRecordIds: false},
             reference : 'table',
-            viewConfig: {useRowRecordIds: false},
             width     : '100%',
 
             columnDefaults: {

package/examples/tablePerformance/MainContainer2.mjs

@@ -72,8 +72,8 @@ class MainContainer2 extends Container {
             }]
         }, {
             module    : TableContainer,
+            bodyConfig: {useRowRecordIds: false},
             reference : 'table',
-            viewConfig: {useRowRecordIds: false},
             width     : '100%',
 
             columnDefaults: {

package/examples/tablePerformance/MainContainer3.mjs

@@ -72,8 +72,8 @@ class MainContainer3 extends Container {
             }]
         }, {
             module             : TableContainer,
+            bodyConfig         : {useRowRecordIds: false},
             reference          : 'table',
-            viewConfig         : {useRowRecordIds: false},
             useCustomScrollbars: false,
             width              : '100%',
 
@@ -146,7 +146,7 @@ class MainContainer3 extends Container {
             rows      = me.getReference('amount-rows-field').value,
             inputData = me.up('viewport').createRandomData(columns, rows);
 
-        table.view.createViewData(inputData)
+        table.body.createViewData(inputData)
     }
 
     /**

package/examples/tableStore/MainContainer.mjs

@@ -151,10 +151,10 @@ class MainContainer extends Viewport {
             }]
         }, {
             module      : TableContainer,
+            bodyConfig  : {selectionModel: CellModel},
             id          : 'myTableStoreContainer',
             reference   : 'table',
             store       : MainStore,
-            viewConfig  : {selectionModel: CellModel},
             width       : '100%',
             wrapperStyle: {height: '300px'},
 
@@ -179,7 +179,7 @@ class MainContainer extends Viewport {
      */
     updateSelectionModel(data) {
         if (data.value) {
-            this.getReference('table').view.selectionModel = {
+            this.getReference('table').body.selectionModel = {
                 ntype: data.component.value
             }
         }

package/learn/UsingTheseTopics.md

@@ -41,7 +41,7 @@ You can also launch the preview in a window by going to the Preview tab, then cl
 icon on the right  <span class="far fa-xs fa-window-maximize"></span>. This web site is a Neo.mjs application,
 and the ability to launch browser windows &mdash; all integrated within a single app &mdash; is a unique feature of Neo.mjs!
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Button    from '../button/Base.mjs';
 import Container from '../container/Base.mjs';
 
@@ -57,7 +57,7 @@ class MainView extends Container {
 }
 
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 ---
 

package/learn/benefits/ConfigSystem.md

@@ -10,7 +10,7 @@ and nested approach to their configuration, a gap that a class config system aim
 ## A bad example
 I recently found this Angular code snippet (new public API draft) on LinkedIn:
 
-<pre data-code-readonly>
+```javascript readonly
 // MyComponent with an attribute
 <MyComponent myAttribute="someValue" />
 
@@ -25,7 +25,7 @@ I recently found this Angular code snippet (new public API draft) on LinkedIn:
 
 // Scoped inputs for MyDirective
 <MyComponent @MyDirective(input1="someString" [input2]="mySignal()") />
-</pre>
+```
 
 Now you might wonder why I think that this is not a good way to create apps.