Update callout syntax to align with GitHub’s new syntax

packages/marko/docs/body-content.md

@@ -54,7 +54,7 @@ _HTML Output:_
 
 This is a pretty basic example, but you can imagine how this could be incorporated into a more advanced component to render passed content where/when needed.
 
-> **ProTip:**
+> **ProTip**:
 > Body content can be rendered multiple times. Or not at all.
 
 ## Passing attributes to body content
@@ -76,7 +76,7 @@ These attribute values can be received as a [tag parameter](./syntax.md#paramete
 </random-value>
 ```
 
-> **ProTip:**
+> **ProTip**:
 > Some tags (like the above tag) may not render anything except their body content with some data. This can be quite useful, just look at the `<for>` and `<await>` tags!
 
 ## Named body content
@@ -109,7 +109,7 @@ _components/layout.marko_
 </html>
 ```
 
-> **ProTip:** The `renderBody` property can be omitted. You could use `<${input.heading}/>`, for example.
+> **ProTip**: The `renderBody` property can be omitted. You could use `<${input.heading}/>`, for example.
 
 ### Repeated attribute tags
 

packages/marko/docs/class-components.md

@@ -77,13 +77,13 @@ style.less {
 }
 ```
 
-> **Note:** The code in the `style` section is processed in a context separate from the rest of the template, so you can’t use JavaScript variables inside it. If you need variables in your CSS, use a CSS preprocessor that supports them.
+> **Note**: The code in the `style` section is processed in a context separate from the rest of the template, so you can’t use JavaScript variables inside it. If you need variables in your CSS, use a CSS preprocessor that supports them.
 
 ## Multi-file components
 
 You might prefer to keep your component’s class and styles in separate files from the view — the classical separation of HTML, CSS, and JavaScript. Marko makes this possible with a filename-based convention.
 
-> **ProTip:** If your’re moving the component’s class and styles to separate files is because the code is getting too large, consider splitting the component into smaller, more manageable components.
+> **ProTip**: If your’re moving the component’s class and styles to separate files is because the code is getting too large, consider splitting the component into smaller, more manageable components.
 
 ### Supporting files
 
@@ -134,7 +134,7 @@ And in your `style.css`, define the styles:
 }
 ```
 
-> **ProTip:** Marko actually looks any filenames with the pattern `[name].style.*`, so it will pick up any CSS preprocessor file extensions you use: `.less`, `.stylus`, `.scss`, etc.
+> **ProTip**: Marko actually looks any filenames with the pattern `[name].style.*`, so it will pick up any CSS preprocessor file extensions you use: `.less`, `.stylus`, `.scss`, etc.
 
 ### Components with plain objects
 
@@ -157,11 +157,11 @@ export default {
 
 Split components optimize for when a component renders on the server, and doesn’t need to dynamically rerender in the browser. As a result, its template and logic aren’t sent to the browser, reducing load time and download size.
 
-> **Note:** If a split component is the child of a stateful component, its full rendering logic will still be sent because the parent may pass new input to the split component and rerender it.
+> **Note**: If a split component is the child of a stateful component, its full rendering logic will still be sent because the parent may pass new input to the split component and rerender it.
 
 Additionally, if _all_ components rendered on a page are split components, Marko’s VDOM and rendering runtime is unnecessary, and therefore not sent to the browser.
 
-> **ProTip:** Don’t over-optimize. If your component really doesn’t need rerendering, go ahead and split, but don’t forgo stateful rerendering when it would make your code more maintainable.
+> **ProTip**: Don’t over-optimize. If your component really doesn’t need rerendering, go ahead and split, but don’t forgo stateful rerendering when it would make your code more maintainable.
 
 ### Usage
 
@@ -321,7 +321,7 @@ class {
 </button>
 ```
 
-> **ProTip:** Unlike native DOM events, UI component custom events may be emitted with multiple arguments. For example:
+> **ProTip**: Unlike native DOM events, UI component custom events may be emitted with multiple arguments. For example:
 >
 > ```js
 > this.emit("foo", "bar", "baz");
@@ -368,7 +368,7 @@ class {
 <fancy-button key="myFancyButton"/>
 ```
 
-> **Note:** The `[]` suffix (e.g. `key="colors[]"`) lets Marko know that the element will be repeated multiple times with the same key.
+> **Note**: The `[]` suffix (e.g. `key="colors[]"`) lets Marko know that the element will be repeated multiple times with the same key.
 
 #### Keyed matching
 
@@ -704,7 +704,7 @@ Returns `true` if the component needs a bath.
 
 Replaces the state with an entirely new state. Equivalent to `this.state = newState`.
 
-> **Note:** While `setState()` is additive and will not remove properties that are in the old state but not in the new state, `replaceState()` _will_ add the new state and remove the old state properties that are not found in the new state. Thus, if `replaceState()` is used, consider possible side effects if the new state contains less or other properties than the replaced state.
+> **Note**: While `setState()` is additive and will not remove properties that are in the old state but not in the new state, `replaceState()` _will_ add the new state and remove the old state properties that are not found in the new state. Thus, if `replaceState()` is used, consider possible side effects if the new state contains less or other properties than the replaced state.
 
 ### `rerender([input])`
 
@@ -880,7 +880,7 @@ class {
 }
 ```
 
-> **ProTip:** When a lifecycle event occurs in the browser, the corresponding event is emitted on the component instance. A parent component, or other code that has access to the component instance, can listen for these events. For example:
+> **ProTip**: When a lifecycle event occurs in the browser, the corresponding event is emitted on the component instance. A parent component, or other code that has access to the component instance, can listen for these events. For example:
 >
 > ```js
 > component.on("input", function (input, out) {

packages/marko/docs/compiler.md

@@ -1,9 +1,7 @@
 # Compiler
 
 > **Warning**:
-> The compiler API and hooks are not terribly stable. They’re intended for advanced integrations or userland experimentation with new language features.
->
-> Prefer existing official plugins and the standard tag library when possible.
+> The compiler API and hooks do not adhere to the [semantic versioning](https://semver.org) rules of Marko’s template and runtime APIs. **_Breaking changes may be introduced outside of the `marko` package’s major versions._** They’re intended for advanced integrations or userland experimentation with new language features.
 
 ## Compile API
 
@@ -410,7 +408,7 @@ Migrations run automatically in the background, and can be written to disk when
 
 To hook into the `migrate` stage, [use the `migrate` option in the `marko.json` file](https://markojs.com/docs/marko-json/#paths).
 
-> **Note:**
+> **Note**:
 > To make the compiler stop at this point and output the migrated template, rather than continuing to produce the JavaScript output, [set `output: "migrate"`](#output) in the [compilation options](#options).
 
 ### Transform

packages/marko/docs/concise.md

@@ -36,7 +36,7 @@ _output.html_
 <span id="my-id"></span> <button id="submit" class="primary large"></button>
 ```
 
-> **ProTip:** These shorthand attributes are available within the HTML syntax as well
+> **ProTip**: These shorthand attributes are available within the HTML syntax as well
 
 ## Text
 

packages/marko/docs/conditionals-and-lists.md

@@ -56,7 +56,7 @@ A key should be a string or number that uniquely identifies an item in the list
 </for>
 ```
 
-> **ProTip:** If you have multiple tags underneath `<for>`, you can key only the first tag and that is enough to properly identify its siblings as well
+> **ProTip**: If you have multiple tags underneath `<for>`, you can key only the first tag and that is enough to properly identify its siblings as well
 >
 > ```marko
 > <dl>
@@ -69,4 +69,4 @@ A key should be a string or number that uniquely identifies an item in the list
 > </dl>
 > ```
 
-> **Note:** If a key is not set, Marko will use the index of an item as its key. However this only works perfectly if items are only ever added or removed at the end of a list. Here's an example where things break down: if we have a list of `["A", "B", "C"]` and reverse the order, index keys would cause "A" to be transformed into "C" (and "C" into "A"), rather than just swapping them. Additionally if these components contained state, the new "C" would contain the state from the old "A" (and vice-versa). Be aware, stateful components include tags like the native `<input>` element. For this reason **it is always recommended to set a `key` on tags in a `<for>`.**
+> **Note**: If a key is not set, Marko will use the index of an item as its key. However this only works perfectly if items are only ever added or removed at the end of a list. Here's an example where things break down: if we have a list of `["A", "B", "C"]` and reverse the order, index keys would cause "A" to be transformed into "C" (and "C" into "A"), rather than just swapping them. Additionally if these components contained state, the new "C" would contain the state from the old "A" (and vice-versa). Be aware, stateful components include tags like the native `<input>` element. For this reason **it is always recommended to set a `key` on tags in a `<for>`.**

packages/marko/docs/core-tags.md

@@ -55,7 +55,7 @@ The output HTML would be:
 </ol>
 ```
 
-> **Pro Tip**: `<for>`’s `of` attribute can loop over any iterable, just like JavaScript’s [`for...of`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of). This includes strings, `NodeList`s, `Set`s… any object with zero-indexed numeric properties and a `.length`, basically.
+> **ProTip**: `<for>`’s `of` attribute can loop over any iterable, just like JavaScript’s [`for...of`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of). This includes strings, `NodeList`s, `Set`s… any object with zero-indexed numeric properties and a `.length`, basically.
 
 ### Iterating over an object’s properties
 
@@ -123,7 +123,7 @@ You can also pass an optional `step` attribute, which defaults to 1 otherwise. `
 </ol>
 ```
 
-> **ProTip:** This syntax is for generating numbers from nothing. Don’t use it to iterate over an object, like so:
+> **ProTip**: This syntax is for generating numbers from nothing. Don’t use it to iterate over an object, like so:
 >
 > ```marko
 > <!-- Inefficient code, do not copy -->
@@ -138,7 +138,7 @@ You can also pass an optional `step` attribute, which defaults to 1 otherwise. `
 
 ## `<while>`
 
-> **Warning:** Using `<while>` is not recommended. Instead, replicate it with [an iterable and `<for>`](#iterating-over-a-list).
+> **Warning**: Using `<while>` is not recommended. Instead, replicate it with [an iterable and `<for>`](#iterating-over-a-list).
 >
 > In the future, Marko may restrict value mutation during rendering, for runtime optimizations.
 
@@ -224,7 +224,7 @@ Macros receive input like components do, including [a `renderBody` for provided
 <h1>Hello!</h1>
 ```
 
-> **ProTip:** You can use a macro inside itself for recursive layouts, like displaying directory contents.
+> **ProTip**: You can use a macro inside itself for recursive layouts, like displaying directory contents.
 
 ## `<await>`
 
@@ -276,7 +276,7 @@ Regardless of these attributes, the promise is executed as eagerly as possible.
 
 - `timeout` is useful for limiting non-critical content from slowing down the rest of the page too much.
 
-> **Pro Tip**: When using `timeout`, you can distinguish between `TimeoutError`s and promise rejections by checking the error’s `name`:
+> **ProTip**: When using `timeout`, you can distinguish between `TimeoutError`s and promise rejections by checking the error’s `name`:
 >
 > ```marko
 > <await(slowPromise) timeout=5000>

packages/marko/docs/custom-tags.md

@@ -124,7 +124,7 @@ components/
 
 This allows you to create components that have other files associated with them and keep those files together in the directory structure.
 
-> **ProTip:**
+> **ProTip**:
 > You can take advantage of nested `components/` directories to create "subcomponents" that are only available to the component that contains them.
 >
 > ```dir

packages/marko/docs/events.md

@@ -128,4 +128,4 @@ The above code listens to native `change` events from the `<input>` element, and
 </form>
 ```
 
-> **Note:** Events are not received as `input`; you cannot access `input.onEmailChange`. Instead, they set up subscriptions.
+> **Note**: Events are not received as `input`; you cannot access `input.onEmailChange`. Instead, they set up subscriptions.

packages/marko/docs/marko-5-upgrade.md

@@ -24,7 +24,7 @@ or
 yarn upgrade marko@^4
 ```
 
-> Note: Do NOT run `npm install marko` (without the `@^4`). This will put you on Marko 5 and we're not quite there yet.
+> **Note**: Do NOT run `npm install marko` (without the `@^4`). This will put you on Marko 5 and we're not quite there yet.
 
 ## Step 2 - Deal with deprecations
 

packages/marko/docs/marko-json.md

@@ -96,7 +96,7 @@ We can also describe a _pattern_ of attributes to match a definition:
 
 In the above, all attributes prefixed with `data-` are configured to be a `string`.
 
-> **Note:** Future Marko versions will describe these definitions/types in the component itself, reducing the need for this configuration file.
+> **Note**: Future Marko versions will describe these definitions/types in the component itself, reducing the need for this configuration file.
 
 ### Paths
 
@@ -152,7 +152,7 @@ Similar to [`marko-tag.json`](#single-component-definition), this file is discov
 }
 ```
 
-> **⚠️ Note:** Compiler hooks are currently undocumented: avoid using them. The compiler API is overhauled in Marko 5, and will be documented once that transition is complete.
+> **Note**: Compiler hooks are currently undocumented: avoid using them. The compiler API is overhauled in Marko 5, and will be documented once that transition is complete.
 
 ## Shorthands
 

packages/marko/docs/marko-vs-react.md

@@ -364,7 +364,7 @@ With Marko any valid HTML markup can be used inside a Marko template. This is
 not the case with React. The following quote is from the [React
 documentation](https://facebook.github.io/react/docs/introducing-jsx.html#specifying-children-with-jsx):
 
-> **Caveat:**
+> **Note**:
 
 > Since JSX is closer to JavaScript than HTML, React DOM uses `camelCase` property naming
 > convention instead of HTML attribute names.

packages/marko/docs/rendering.md

@@ -8,7 +8,7 @@ _example.js_
 import FancyButton from "./components/fancy-button.marko";
 ```
 
-> **Note:** If you are targeting node.js, you will need to enable the [require extension](./installing.md#require-marko-views) in order to require `.marko` files or you will need to precompile all of your templates using [Marko CLI](https://github.com/marko-js/cli). If you are targeting the browser, you will need to use a bundler like [`lasso`](./lasso.md), [`webpack`](./webpack.md) or [`rollup`](./rollup.md).
+> **Note**: If you are targeting node.js, you will need to enable the [require extension](./installing.md#require-marko-views) in order to require `.marko` files or you will need to precompile all of your templates using [Marko CLI](https://github.com/marko-js/cli). If you are targeting the browser, you will need to use a bundler like [`lasso`](./lasso.md), [`webpack`](./webpack.md) or [`rollup`](./rollup.md).
 
 Once you have a view, you can pass input data and render it:
 
@@ -221,7 +221,7 @@ View.render({
 });
 ```
 
-> **Warning:** Use `$global` with caution; it is visible in any component.
+> **Warning**: Use `$global` with caution; it is visible in any component.
 
 ### Sending global data to browsers
 

packages/marko/docs/rollup.md

@@ -128,7 +128,7 @@ To send the minimal amount of Marko templates to the browser you can provide a M
 This will also automatically invoke code to initialize the components in the browser, so there is no need to call
 `template.render` yourself in the browser.
 
-> Note: if you are using _linked_ plugins then the server plugin will automatically tell the browser compiler which Marko templates to load.
+> **Note**: if you are using _linked_ plugins then the server plugin will automatically tell the browser compiler which Marko templates to load.
 
 ```js
 export default {

packages/marko/docs/state.md

@@ -2,7 +2,7 @@
 
 The output of a component is based on input properties passed from its parent as attributes. However, a component may also maintain internal state that it uses to control its view. If Marko detects a change to either input or to the internal state, the view will automatically be updated.
 
-> **ProTip:**
+> **ProTip**:
 > Only data that is owned and modified by the component should go into its `state`. State should be exclusively used for data that triggers rerenders. Parents control `input`, and the component controls its own `state`.
 
 ## Initializing state
@@ -19,7 +19,7 @@ class {
 <div>The count is ${state.count}</div>
 ```
 
-> **Note:** Only properties that exist when `this.state` is first defined will be watched for changes. If you don't need a property initially, you can set it to `null`.
+> **Note**: Only properties that exist when `this.state` is first defined will be watched for changes. If you don't need a property initially, you can set it to `null`.
 
 ## Updating state
 
@@ -41,16 +41,16 @@ class {
 
 We've extended our example above to add a button with an [event handler](./events.md), so that, when clicked, the `state.count` value is incremented.
 
-> **Note:**
+> **Note**:
 > When browsing existing code, you may see `this.setState('name', value)` being used. This is equivalent to `this.state.name = value`.
 
 ### How updates work
 
 When a property on `state` is set, the component will be scheduled for an update if the property has changed. All updates are batched together for performance. This means you can update multiple state properties at the same time without causing multiple updates.
 
-> **ProTip:** If you need to know when the update has been applied, you can use `this.once('update', fn)` within a component method.
+> **ProTip**: If you need to know when the update has been applied, you can use `this.once('update', fn)` within a component method.
 
-> **Note:** The state object only watches its properties one level deep. This means updates to nested properites on the state (e.g. `this.state.object.something = newValue`) will not be detected.
+> **Note**: The state object only watches its properties one level deep. This means updates to nested properites on the state (e.g. `this.state.object.something = newValue`) will not be detected.
 >
 > Using [immutable](https://wecodetheweb.com/2016/02/12/immutable-javascript-using-es6-and-beyond/) data structures is recommended, but if you want to mutate a state property (perhaps push a new item into an array) you can let Marko know it changed using `setStateDirty`.
 >
@@ -93,7 +93,7 @@ _fancy-save-button.marko_
 </context>
 ```
 
-> **Note:** Context _couples_ tags together and can limit reuse of components.
+> **Note**: Context _couples_ tags together and can limit reuse of components.
 
 ### When to use a Redux like pattern
 

packages/marko/docs/styles.md

@@ -14,7 +14,7 @@ style {
 
 These blocks add global css to the page. The above example will not style just the `<div>` in the component, but all divs on the page. Because of this we recommend following a naming convention such as [BEM](http://getbem.com/introduction/). Marko will likely provide a way to automatically scope these styles to the current component [in the future](https://github.com/marko-js/marko/issues/666).
 
-> **Note:** Style blocks (unlike `<style>` tags) do not support `${placeholders}` and must be static.
+> **Note**: Style blocks (unlike `<style>` tags) do not support `${placeholders}` and must be static.
 
 ## Preprocessors