Add more docs; organise docs for website

WebCoder49 · WebCoder49 · commit 5c298018f74e · 2025-08-06T17:10:06.000+01:00
diff --git a/docs/_index.md b/docs/_index.md
@@ -2,7 +2,7 @@
 title = 'Flexible Syntax Highlighted Editable Textareas'
 +++
 
-# An <mark>editable</mark> `<textarea>` that supports *any* <mark>syntax highlighting</mark> algorithm, for code or something else. [Also, added plugins.](#TODO)
+# An <mark>editable</mark> `<textarea>` that supports *any* <mark>syntax highlighting</mark> algorithm, for code or something else. [Also, added plugins.](plugins)
 
 Aiming to be [more <mark>flexible</mark>, <mark>lightweight</mark>,
 <mark>modular</mark>, <mark>progressively enhanced</mark> and
@@ -47,7 +47,7 @@ console.log("Hello, World!");</textarea></code-input>
 
 ### Tutorials by Example
 
-#### Prism.js Code Editor (use **with vanilla HTML here** or [with ECMAScript Modules/Vue/Nuxt](#TODO)) {#demo-preset-prism}
+#### Prism.js Code Editor (use **with vanilla HTML here** or [with ECMAScript Modules/Vue/Nuxt](/frameworks/prism)) {#demo-preset-prism}
 
 ```
 <!DOCTYPE html>
@@ -74,7 +74,7 @@ console.log("Hello, World!");</textarea></code-input>
 
         <!--Import some code-input plugins-->
         <!--The same goes for downloaded versions.-->
-        <!--Plugin files are here: #TODO.-->
+        <!--Plugin files are here: https://code-input-js.org/plugins.-->
         <script src="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.6/plugins/indent.min.js"></script>
 
         <!--Register code-input template-->
@@ -83,7 +83,7 @@ console.log("Hello, World!");</textarea></code-input>
                 new codeInput.templates.Prism(
                 Prism,
                 [
-                    // You can add or remove plugins in this list from #TODO.
+                    // You can add or remove plugins in this list from https://code-input-js.org/plugins.
                     // All plugins used must be imported above.
                     new codeInput.plugins.Indent()
                 ]
@@ -97,13 +97,13 @@ console.log("Hello, World!");</textarea></code-input>
         <code-input template="syntax-highlighted" language="JavaScript"><textarea code-input-fallback>// Demo editable code
 console.log("Hello, World!");</textarea></code-input>
 
-        <!--Additional usage details are here: #TODO-->
-        <!--A list of plugins are here, allowing a well-rounded code-editor to be created quickly from code-input, if you're into that: #TODO-->
+        <!--Additional usage details are here: https://code-input-js.org/#pages-->
+        <!--A list of plugins are here, allowing a well-rounded code-editor to be created quickly from code-input, if you're into that: https://code-input-js.org/plugins-->
     </body>
 </html>
 ```
 
-#### highlight.js Code Editor (use **with vanilla HTML here** or [with ECMAScript Modules/Vue/Nuxt](#TODO)) {#demo-preset-hljs}
+#### highlight.js Code Editor (use **with vanilla HTML here** or [with ECMAScript Modules/Vue/Nuxt](frameworks/hljs)) {#demo-preset-hljs}
 
 ```
 <!DOCTYPE html>
@@ -131,7 +131,7 @@ console.log("Hello, World!");</textarea></code-input>
 
         <!--Import some code-input plugins-->
         <!--The same goes for downloaded versions.-->
-        <!--Plugin files are here: #TODO.-->
+        <!--Plugin files are here: https://code-input-js.org/plugins.-->
         <script src="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.6/plugins/indent.min.js"></script>
 
         <!--Register code-input template-->
@@ -140,7 +140,7 @@ console.log("Hello, World!");</textarea></code-input>
                 new codeInput.templates.Hljs(
                     hljs,
                     [
-                        // You can add or remove plugins in this list from #TODO.
+                        // You can add or remove plugins in this list from https://code-input-js.org/plugins.
                         // All plugins used must be imported above.
                         new codeInput.plugins.Indent()
                     ]
@@ -154,13 +154,13 @@ console.log("Hello, World!");</textarea></code-input>
         <code-input template="syntax-highlighted" language="JavaScript"><textarea code-input-fallback>// Demo editable code
 console.log("Hello, World!");</textarea></code-input>
 
-        <!--Additional usage details are here: #TODO-->
-        <!--A list of plugins are here. We recommend the Autodetect plugin with highlight.js: #TODO-->
+        <!--Additional usage details are here: https://code-input-js.org/#pages-->
+        <!--A list of plugins are here. We recommend the Autodetect plugin with highlight.js: https://code-input-js.org/plugins-->
     </body>
 </html>
 ```
 
-#### Editor with Custom Highlighting Algorithm (use **with vanilla HTML here** or [with ECMAScript Modules/Vue/Nuxt](#TODO)) {#demo-preset-custom}
+#### Editor with Custom Highlighting Algorithm (use **with vanilla HTML here** or [with ECMAScript Modules/Vue/Nuxt](frameworks/custom)) {#demo-preset-custom}
 
 ```
 <!--custom: TODO-->
@@ -189,7 +189,7 @@ Extensible With Plugins
 </dt>
 <dd>
 
-Want coding features like easy indentation and closing of brackets, tools like find and replace and go to line, or better integration like custom autocomplete popups and processing of selected highlighted tokens? [Try a selection of the easy-to-use plugins.](#TODO) Plugin not available? [Make one yourself as a JavaScript class!](#TODO)
+Want coding features like easy indentation and closing of brackets, tools like find and replace and go to line, or better integration like custom autocomplete popups and processing of selected highlighted tokens? [Try a selection of the easy-to-use plugins.](plugins) Plugin not available? [Make one yourself as a JavaScript class!](plugins/new)
 
 </dd>
 
diff --git a/docs/frameworks/custom/index.md b/docs/frameworks/custom/index.md
@@ -0,0 +1,7 @@
++++
+title = 'How to use code-input and Custom Highlighting Algorithms with Vue or Nuxt'
++++
+
+# How to use code-input and Custom Highlighting Algorithms with Vue or Nuxt
+
+We plan to get documentation for this soon (contributions via a pull request are welcome!), but for now please use [the corresponding article for highlight.js](../hljs) [the demo frameworkless code for code-input and custom highlighting algorithms](../../#demo-preset-custom).
diff --git a/docs/frameworks/hljs/index.md b/docs/frameworks/hljs/index.md
@@ -1,20 +1,23 @@
-# Vue/Nuxt Tutorial - For Highlight.js Integration
- 
-Vue and Nuxt have some similarities, but there is one big difference in how they can use this library. In Nuxt there is server side rendering (SSR) that will attempt to create the final HTML before sending the page to the browser. This cannot use any browser-specific things so the `code-input` component must be excluded from rendering until hydration in the browser.
++++
+title = 'How to use code-input and highlight.js with Vue or Nuxt'
++++
+
+# How to use code-input and highlight.js with Vue or Nuxt
 
-> [!NOTE]  
-> The following demo is for integrating with `highlight.js` but if you follow the instructions in [the main README](../README.md) you can substitute highlight.js for Prism.js or a custom template.
+> Contributors: 2025 Paul Rosen
 
+Vue and Nuxt have some similarities, but there is one big difference in how they can use this library. In Nuxt there is server side rendering (SSR) that will attempt to create the final HTML before sending the page to the browser. This cannot use any browser-specific things so the `code-input` component must be excluded from rendering until hydration in the browser.
+ 
 ## Vue
 
 ### 1. Create a Vue app
 
 First, create a Vue project. (If you already have a Vue project then you can skip this step). On a command line, type this:
-```
+```bash
 npm create vue@latest
 ```
 At the time this tutorial was created, the output was the following, after I named the project `syntax-highlighter` and checked "typescript":
-```
+```plaintext
 Need to install the following packages:
 create-vue@3.18.0
 Ok to proceed? (y) y
@@ -87,7 +90,7 @@ So that Vue knows that `code-input` is not a Vue component.
 ### 3. Initialize the textarea
 
 Create a component with whatever name you want. Perhaps `RichEditor.vue`. Paste the following into it:
-```vue
+```html
 <template>
   <code-input name="richText">function hello() { console.log("world"); }
   </code-input>
@@ -132,12 +135,12 @@ code-input {
 ### 4. Using the component
 
 In the generated file `HelloWorld.vue`, place the following line after the "greetings" line:
-```vue
+```html
 <RichEditor />
 ```
 
 And put its import in the `<script>` section:
-```vue
+```html
 import RichEditor from "@/components/RichEditor.vue";
 ```
 
@@ -159,7 +162,7 @@ First, create a Nuxt project. (If you already have a Nuxt project then you can s
 npm create nuxt@latest syntax-highlighter
 ```
 At the time this tutorial was created, the output was the following:
-```
+```plaintext
 Need to install the following packages:
 create-nuxt@3.27.0
 Ok to proceed? (y) y
@@ -254,7 +257,7 @@ So that the necessary css is loaded for code-input, and an example theme is load
 
 Create a component with whatever name you want. Perhaps `app/components/RichEditor.vue`. Paste the following into it:
 
-```vue
+```html
 <template>
   <div class="rich-editor">
     <!-- Use ClientOnly so that no SSR is done on the code-input component -->
@@ -341,12 +344,12 @@ code-input textarea::selection {
 ### 4. Using the component
 
 In the generated file `app.vue`, place the following line after the "NuxtRouteAnnouncer" line:
-```vue
+```html
 <RichEditor value="function hello() { console.log('world'); }" name="myEditor" />
 ```
 
 And put its import in the `<script>` section:
-```vue
+```html
 import RichEditor from "./components/RichEditor.vue";
 ```
 
diff --git a/docs/frameworks/hljs/nuxt-demo-screenshot.png b/docs/frameworks/hljs/nuxt-demo-screenshot.png
diff --git a/docs/frameworks/hljs/vue-demo-screenshot.png b/docs/frameworks/hljs/vue-demo-screenshot.png
diff --git a/docs/frameworks/prism/index.md b/docs/frameworks/prism/index.md
@@ -0,0 +1,7 @@
++++
+title = 'How to use code-input and Prism.js with Vue or Nuxt'
++++
+
+# How to use code-input and Prism.js with Vue or Nuxt
+
+We plan to get documentation for this soon (contributions via a pull request are welcome!), but for now please use [the corresponding article for highlight.js](../hljs) and [the demo frameworkless code for code-input and Prism.js](../../#demo-preset-prism).
diff --git a/docs/plugins/list/index.md b/docs/plugins/list/index.md
@@ -0,0 +1,5 @@
++++
+title = "code-input.js' Existing Plugins"
++++
+
+# TODO
diff --git a/docs/plugins/new/index.md b/docs/plugins/new/index.md
@@ -0,0 +1,5 @@
++++
+title = 'Creating your own code-input Plugin to add functionality'
++++
+
+# TODO

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 ++++
 +title = "code-input.js' Existing Plugins"
 ++++
++
 +# TODO