docs: updates

Author: andreruffert

README.md

@@ -17,6 +17,10 @@ The code is highlighted without having to wrap a bunch of `<span>` elements arou
   <br>
 </div>
 
+## Examples
+
+For examples checkout the [CodePen &lt;syntax-highlight&gt; collection](https://codepen.io/collection/EPYpMJ).
+
 ## Install
 
 Install via npm
@@ -71,24 +75,27 @@ Currently there are only limited [themes](https://github.com/andreruffert/syntax
 /**
  * @typedef Config
  * @type {object}
- * @property {string[]} languages - Language grammars to highlight.
- * @property {{ [key: string]: string[] }} languageTokens - Language specific token types.
+ * @property {string[]} languages - List of languages to support for syntax highlighting.
+ * @property {string[]} tokenTypes - Token types used during lexing/parsing.
+ * @property {{[key: string]: string[]}} languageTokens - Mapping of language names to their specific tokenization rules.
+ * @property {function} setup - Runs before the custom element gets defined in the registry.
+ * @property {function} tokenize - Tokenize text based on the specified language grammar
  */
 
 window.she = window.she || {};
 
 /** @type {Config} */
 window.she.config = {
   languages: ['markup', 'css', 'javascript'], // Default
+  tokenTypes: [],
+  languageTokens: {},
+  setup: async () => {},
+  tokenize: (text, language) => [],
 };
 ```
 
 Full list of all [languages supported](https://prismjs.com/#supported-languages) by the prism tokenizer.
 
-## Examples
-
-For examples checkout the [CodePen &lt;syntax-highlight&gt; collection](https://codepen.io/collection/EPYpMJ).
-
 ## Browser Support
 
 <picture>

docs/index.html

@@ -96,6 +96,11 @@ <h2 class="playground-title">Demo Playground</h2>
         </div>
       </section>
 
+      <section data-section="content">
+        <h1>Examples</h1>
+        <p>For more examples checkout the CodePen <a href="https://codepen.io/collection/EPYpMJ" target="_blank" rel="noreferrer">&lt;syntax-highlight&gt; collection</a>.</p>
+      </section>
+
       <section data-section="content">
         <h1>Installation &amp; Usage</h1>
         <article>
@@ -161,15 +166,22 @@ <h1>Configuration</h1>
           <syntax-highlight language="js" id="copy-config">/**
  * @typedef Config
  * @type {object}
- * @property {string[]} languages - Prism languages.
- * @property {{ [key: string]: string[] }} languageTokens - Language specific token types.
+ * @property {string[]} languages - List of languages to support for syntax highlighting.
+ * @property {string[]} tokenTypes - Token types used during lexing/parsing.
+ * @property {{[key: string]: string[]}} languageTokens - Mapping of language names to their specific tokenization rules.
+ * @property {function} setup - Runs before the custom element gets defined in the registry.
+ * @property {function} tokenize - Tokenize text based on the specified language grammar
  */
 
 window.she = window.she || {};
 
 /** @type {Config} */
 window.she.config = {
   languages: ['markup', 'css', 'javascript'], // Default
+  tokenTypes: [],
+  languageTokens: {},
+  setup: async () => {},
+  tokenize: (text, language) => [],
 };</syntax-highlight>
           <clipboard-copy for="copy-config" class="button" aria-label="Copy content">
             <svg class="icon" width="1em" height="1em" aria-hidden="true"><use xlink:href="#copy"></use></svg>
@@ -178,11 +190,6 @@ <h1>Configuration</h1>
         <p>Full list of all <a href="https://prismjs.com/#supported-languages" target="_blank" rel="noreferrer">languages supported</a> by the prism tokenizer.</p>
       </section>
 
-      <section data-section="content">
-        <h1>Examples</h1>
-        <p>For more examples checkout the CodePen <a href="https://codepen.io/collection/EPYpMJ" target="_blank" rel="noreferrer">&lt;syntax-highlight&gt; collection</a>.</p>
-      </section>
-
       <section data-section="content">
         <h1>Credits</h1>
         <ul>