#6873 replaced all pre tags inside the learning content

Author: tobiu

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>
+```
 
 ---
 

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.
 

learn/benefits/FormsEngine.md

@@ -3,7 +3,7 @@
 You do not need to define a state tree on your own.
 It is sufficient to just use namespaces inside the `name` attribute of each field.
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Button        from '../button/Base.mjs';
 import FormContainer from '../form/Container.mjs';
 import TextField     from '../form/field/Text.mjs';
@@ -38,7 +38,7 @@ class MainView extends FormContainer {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 ## Forms can get validated without being mounted
 
@@ -49,7 +49,7 @@ Getting the field values still works like before.
 Use case: In case you have a form split into multiple pages and only one of them is mounted to keep
 the DOM minimal, you can still get all field values.
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Button        from '../button/Base.mjs';
 import Container     from '../container/Base.mjs';
 import FormContainer from '../form/Container.mjs';
@@ -89,7 +89,7 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 ## Nested Forms
 
@@ -104,28 +104,28 @@ Inside the example preview, clear the user lastname via hitting the x-button.
 Afterwards, click on the 3 buttons at the bottom and inspect the output inside the main window console carefully.
 
 The main form will log:
-<pre data-code-readonly>
+```javascript readonly
 {
     account: 'My Account',
     product: {brand: 'Tesla', name: 'Car'},
     user   : {firstname: 'John', lastname: null}
 }
 'isValid: false'
-</pre>
+```
 
 The user form will log:
-<pre data-code-readonly>
+```javascript readonly
 {user: {firstname: 'John', lastname: null}}
 'isValid: false'
-</pre>
+```
 
 The product form will log:
-<pre data-code-readonly>
+```javascript readonly
 {product: {brand: 'Tesla', name: 'Car'}}
 'isValid: true'
-</pre>
+```
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Button        from '../button/Base.mjs';
 import Container     from '../container/Base.mjs';
 import FormContainer from '../form/Container.mjs';
@@ -223,7 +223,7 @@ class MainView extends FormContainer {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 Bonus: Inspect the DOM Inside the `TabContainer`.
 You will notice that only the active Tab is mounted inside the DOM.
@@ -244,12 +244,12 @@ since it does rely on defining child modules inside their own class files
 and dynamically importing them.
 
 In a nutshell:
-<pre data-code-readonly>
+```javascript readonly
 {
     module: TabContainer,
     items : [
         {module: () => import('./MyChildForm1.mjs')},
         {module: () => import('./MyChildForm2.mjs')}
     ]
 }
-</pre>
+```

learn/benefits/MultiWindow.md

@@ -14,7 +14,7 @@ running the code. Even though it's running in a new window, it's still part of t
 (In this case, the app is the web site you're looking at now.) That means both the code in both windows 
 seamlessly share events, data, etc. — the code doesn't care that some code is running in a
 separate window.
-<pre data-code-livepreview>
+```javascript live-preview
 import Button    from '../button/Base.mjs';
 import Container from '../container/Base.mjs';
 
@@ -31,6 +31,6 @@ class MainView extends Container {
 }
 
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 </details>

learn/benefits/OffTheMainThread.md

@@ -89,13 +89,13 @@ The worst case that could happen now is that your app worker will slow down and
 this will not affect your UI (rendering thread → main).
 Probably the best solution for single page apps (SPAs) as well as multi-window apps (MWAs) looks like this:
 
-<pre data-neo-component>
+```json neo-component
 {
     "cls" : "neo-worker-setup",
     "tag" : "element-loader",
     "vdom": {"src": "./resources/images/workers-focus.svg"}
 }
-</pre>
+```
 
 To prevent the app worker from handling too much logic, we can optionally spawn more workers.
 Each thread has its fixed scope. Let us take a quick look into each of them.

learn/benefits/Speed.md

@@ -20,7 +20,7 @@ Click on Preview, then use your mouse or trackpad to pan and zoom — the he
 If you move quickly, you might reach 20,000 or 30,000 delta updates per second. We've seen some examples that go over 40,000 updates per 
 second — but we've never actually hit the limit.
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Container from '../container/Base.mjs';
 import Helix     from '../component/Helix.mjs';
 
@@ -43,7 +43,7 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 
 If you're interested, there's <a href="../../examples/component/helix/index.html" target="_blank">a more full-featured helix example</a> that includes showing delta updates, 

learn/gettingstarted/ComponentModels.md

@@ -3,7 +3,7 @@ Neo has a feature that allows shared, bindable, data.
 A _state provider_ — `Neo.state.Provider` — instance holds properties that 
 can be bound to component properties.
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Container from  '../container/Base.mjs';
 import Label     from  '../component/Label.mjs';
 import TextField from  '../form/field/Text.mjs';
@@ -35,7 +35,7 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 View model properties are visible down the containment hierarchy:
 Properties introduced in a parent container will be available to any child component, and properties
@@ -55,7 +55,7 @@ usually coded as separate classes.)
 
 Below is another example.
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Container from  '../container/Base.mjs';
 import Label     from  '../component/Label.mjs';
 import Panel     from  '../container/Panel.mjs';
@@ -107,7 +107,7 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 In this case, the main view has three child items of type `MyPanel`, each containing a label. 
 The main view has a state provider with a `foo` property, and the third child has its own state provider with a `foo` property.

learn/gettingstarted/Config.md

@@ -17,7 +17,7 @@ Here's an example of a new component class `Simple` with three config properties
 The `Simple` class introduces syntax. It doesn't have any content, so if you run the code you won't 
 see anything. We'll change that in the next example.
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Component from '../component/Base.mjs';
 import Container from '../container/Base.mjs';
 
@@ -48,7 +48,7 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 ## Detecting when a value changes
 
@@ -57,7 +57,7 @@ a _lifecyle property_. A lifecycle property provides methods that are run as the
 updated or accessed. You're free to implment these methods to provide business rules, normalize
 values, or have side-effects, such as updating a view or firing an event.
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Component from '../component/Base.mjs';
 import Container from '../container/Base.mjs';
 
@@ -98,7 +98,7 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 This time if you run the code you'll see "hi there" in the view. That's because the Simple instance is
 configured with `bar: 'hi there'`, and since that's a lifecycle property the `afterSetBar()` method
@@ -110,7 +110,7 @@ Typically, the _afterSet_ method is used to update a view or to fire an event.
 
 Look at this code: `afterSetBar()` fires an event, and the config in the `items[]` is listening to it.
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Component from '../component/Base.mjs';
 import Container from '../container/Base.mjs';
 
@@ -149,5 +149,5 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 

learn/gettingstarted/DescribingTheUI.md

@@ -10,7 +10,7 @@ use to describe the component you're creating> You can also access or set the pr
 
 ## A view with one component
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Button    from '../button/Base.mjs';
 import Container from '../container/Base.mjs';
 
@@ -27,7 +27,7 @@ class MainView extends Container {
 }
 
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 
 The button config is just an object describing the button being created. In the example, it has three
@@ -46,7 +46,7 @@ Let's put a second button in the container.
 
 ## A view with two components
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Button    from '../button/Base.mjs';
 import Container from '../container/Base.mjs';
 
@@ -67,7 +67,7 @@ class MainView extends Container {
 }
 
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 If you run the example you'll see two buttons, arranged according to the `layout`. If you'd like, 
 modify the code to specify `ntype:'hbox'` and run it again. 

learn/gettingstarted/Events.md

@@ -13,7 +13,7 @@ pairs as you need.
 The code below shows two text fields, with `listeners` for `change` and `focusEnter`.
 (The events for any component are documented in the API docs.)
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Container from '../container/Base.mjs';
 import TextField from '../form/field/Text.mjs';
 
@@ -38,7 +38,7 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 If you run the example, and open the browser's debugger, you'll see the console being logged as you type or give
 focus to either field.
@@ -52,7 +52,7 @@ that with a _component controller_.
 A `Neo.controller.Component` is a simple class associated with a component class. As a view is created, an 
 instance of its associated controller is automatically created. 
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Base from '../controller/Component.mjs';
 
 class MainViewController extends Base {
@@ -86,7 +86,7 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 
 
@@ -116,7 +116,7 @@ automatically get lifecycle methods run before the value is assigned, after the
 before the value is accessed. We're using the _after_ method to fire a `change` event.
 
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Button    from '../button/Base.mjs';
 import Container from '../container/Base.mjs';
 
@@ -154,4 +154,4 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```