@webcoder49/code-input 2.5.0 → 2.6.0

package/docs/modules-and-frameworks/hljs/vue/_index.md

@@ -0,0 +1,233 @@
++++
+title = 'How to use code-input and highlight.js with Vue'
++++
+
+# How to use code-input and highlight.js with Vue
+
+> Contributors: 2025 Paul Rosen, 2025 Oliver Geer; **code samples licensed [MIT/Expat](https://spdx.org/licenses/MIT)**
+
+## 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, use your package manager to do so, for example by typing one of these:
+```bash
+yarn create vue
+# OR
+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" (to give the most specific type of code possible in the tutorial; you can use JavaScript just by reading the comments and emitting types from the tutorial's samples):
+```plaintext
+Need to install the following packages:
+create-vue@3.18.0
+Ok to proceed? (y) y
+
+
+> npx
+> "create-vue"
+
+┌  Vue.js - The Progressive JavaScript Framework
+│
+◇  Project name (target directory):
+│  syntax-highlighter
+│
+◇  Select features to include in your project: (↑/↓ to navigate, space to select, a to toggle
+all, enter to confirm)
+│  TypeScript
+│
+◇  Select experimental features to include in your project: (↑/↓ to navigate, space to
+select, a to toggle all, enter to confirm)
+│  none
+│
+◇  Skip all example code and start with a blank Vue project?
+│  No
+
+Scaffolding project in /srv/app/projects/syntax-highlighter...
+│
+└  Done. Now run:
+
+   cd syntax-highlighter
+   npm install
+   npm run dev
+
+| Optional: Initialize Git in your project directory with:
+
+   git init && git add -A && git commit -m "initial commit"
+```
+
+And just like the above instructions mention, do the following:
+```bash
+cd syntax-highlighter
+
+
+yarn install
+# OR
+npm install
+# or your package manager's equivalent command
+
+yarn run dev
+# OR
+npm run dev
+# or your package manager's equivalent command
+```
+
+You should be able to open your browser to the path that it prints out and see a working Vue app. If so, congratulations! Hit Ctrl-C in the command line to stop it.
+
+## 2. Add dependencies
+
+> This tutorial will use `highlight.js` for the syntax highlighting. If you are using a different method then adjust as needed.
+
+Type this:
+```bash
+yarn add @webcoder49/code-input
+# OR
+npm install @webcoder49/code-input
+# or your package manager's equivalent command
+
+yarn add highlight.js
+# OR
+npm install highlight.js
+# or your package manager's equivalent command
+```
+
+In the file `vite.config.ts`, change the line that contains `vue(),` to this:
+```javascript
+vue({
+  template: {
+    compilerOptions: {
+      isCustomElement: (tag) => tag === 'code-input'
+    }
+  }
+}),
+```
+
+So that Vue knows that `code-input` is not a Vue component.
+
+## 3. Initialize a code-input element
+
+Create a component with whatever name you want. Perhaps `CodeEditor.vue`. Read the following code then paste it into the file:
+```html
+<template>
+  <!--Attributes that make sense on a
+  textarea element are both on the code-
+  input element for when full
+  functionality is present, and on the
+  fallback textarea for when it's not
+  (e.g. bug or outdated browser).-->
+  <code-input
+    ref="elem"
+    template="code-editor"
+    :name="name"
+    :value="value"
+    :language="language"
+    @input="value = elem.value; emit('input', elem.value)"
+    @code-input_load="loaded"
+  >
+    <textarea
+      ref="fallback"
+      :name="name"
+      :value="value"
+      @input="value = fallback.value; emit('input', fallback.value)"
+      data-code-input-fallback
+    ></textarea>
+  </code-input>
+</template>
+
+<script lang="ts" setup>
+import {onMounted, ref} from "vue";
+// For loading the code-input web component
+import codeInput from "@webcoder49/code-input";
+import Template from "@webcoder49/code-input/templates/hljs.mjs";
+// You can import plugins as shown below, and at https://code-input-js.org/plugins
+import Indent from "@webcoder49/code-input/plugins/indent.mjs";
+
+// You can import and register (in onMounted below) whichever languages you will use,
+// or if you will use many import all, following the instructions at https://highlightjs.org/#usage.
+import hljs from 'highlight.js/lib/core';
+import javascript from 'highlight.js/lib/languages/javascript';
+
+// The following are optional.
+const emit = defineEmits<{
+  // If you want a listener when the user changes the contents.
+  (e: "input", value: string): void;
+  // If you want to do more initialization after code-input is ready.
+  (e: "ready", element: HTMLElement): void;
+}>();
+// The JavaScript version of the TypeScript above would be const emit = defineEmits(["input", "ready"]);
+
+const props = defineProps<{
+  value: string; // The starting value for the code-input element
+  name: string; // The name that is used when the code-input element is in a form
+  language: string; // The programming language name given to highlight.js, which must also be imported above and registered below with highlight.js.
+}>();
+// The JavaScript version of the TypeScript above would be const props = defineProps({value: String, name: String});
+
+// This contains the HTMLElement of the code-input component
+const elem = ref();
+
+onMounted(async () => {
+  // Set up the highlighting engine first
+  hljs.registerLanguage('javascript', javascript);
+  // Register that engine with code-input
+  codeInput.registerTemplate("code-editor", new Template(hljs, [new Indent()]));
+});
+
+function loaded() {
+  // This is called after the code-input is initialized.
+  // If you have some further initialization for the code-input element, then do it in this event.
+  emit("ready", elem);
+}
+
+</script>
+
+<style>
+/* These are necessary styles to make code-input work */
+@import '@webcoder49/code-input/code-input.css';
+/* This is one possibility of styles to use for highlighting */
+@import 'highlight.js/styles/default.min.css';
+
+code-input {
+  resize: both; /* if you want the resizing control that textarea has */
+  margin: 0; /* you can override other styles */
+  font-family: monospace;
+  
+  background: #f1f1f1; /* As explained below, this is required to set the colour of the code-input element if it
+                        falls back to having no highlighting, and while it loads. */
+}
+
+.hljs {
+  background: #f1f1f1;  /* This is a style specific to highlighted code, so needs to use highlight.js' selector.
+                           A side effect of this is that it will not affect unregistered/unloaded code-input elements. */
+}
+/* If you want to change the color of selected text during editing */
+code-input textarea::selection {
+  background: #6781ef;
+  color: #ffffff;
+}
+</style>
+```
+
+## 4. Using the component
+
+In the generated file `HelloWorld.vue`, place the following line after the "greetings" line:
+```html
+<CodeEditor value="function hello() { console.log('world'); }" name="myEditor" />
+```
+
+And put its import in the `<script>` section:
+```javascript
+import CodeEditor from "@/components/CodeEditor.vue";
+```
+
+Restart the server:
+```bash
+yarn run dev
+# OR
+npm run dev
+# or your package manager's equivalent command
+```
+
+If all went well, you should see the following in the browser:
+
+![An editable syntax-highlighted textarea added to the Vue starter page.](vue-demo-screenshot.png)
+
+## Please Note
+* Hot module replacement (the updating of a running app when files are changed) will not work completely correctly when the `CodeEditor` component is changed but will work when files that use it are changed. This is only important when running a development server.

package/docs/modules-and-frameworks/prism/_index.md

@@ -0,0 +1,14 @@
++++
+title = 'Using code-input.js with Prism.js in projects which use modules or frameworks'
++++
+
+# Using code-input.js with Prism.js in projects which use modules or frameworks 
+
+> Contributors: 2025 Oliver Geer
+
+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 vanilla code for code-input and Prism.js](../../#playground-preset-prism). <!--Good time to add docs here would be release of Prism v2.-->
+
+Bear in mind that the Prism.js library can be imported into ECMAScript modules as follows:
+```javascript
+import Prism from "prismjs";
+```