add some color

.gitignore

@@ -7,4 +7,5 @@ node_modules
 docs/docs_site/.vitepress/dist
 docs/docs_site/.vitepress/cache
 docs/src/.vitepress/cache
-docs/src/.vitepress/dist
+docs/src/.vitepress/dist
+bonito

docs/src/.vitepress/config.mts

@@ -21,6 +21,7 @@ export default defineConfig({
       dark: "github-dark"}
   },
   themeConfig: {
+    outline: 'deep',
     // https://vitepress.dev/reference/default-theme-config
     logo: { src: '/logo_dark.png', width: 24, height: 24 },
     search: {

docs/src/.vitepress/theme/style.css

@@ -39,7 +39,7 @@ https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/var
   --julia-green: #389826;
 
   --vp-c-brand: #389826;
-  --vp-c-brand-light: #e3e3f3;
+  --vp-c-brand-light: #3dd027;
   --vp-c-brand-lighter: #9499ff;
   --vp-c-brand-lightest: #bcc0ff;
   --vp-c-brand-dark: #535bf2;
@@ -147,4 +147,24 @@ mjx-container {
 mjx-container > svg {
   margin: auto;
   display: inline-block;
+}
+
+/**
+ * Colors links
+ * -------------------------------------------------------------------------- */
+
+ :root {
+  --vp-c-brand-1: #CB3C33;
+  --vp-c-brand-2: #CB3C33;
+  --vp-c-brand-3: #CB3C33;
+  --vp-c-sponsor: #ca2971;
+  --vitest-c-sponsor-hover: #c13071;
+}
+
+.dark {
+  --vp-c-brand-1: #91dd33;
+  --vp-c-brand-2: #91dd33;
+  --vp-c-brand-3: #91dd33;
+  --vp-c-sponsor: #91dd33;
+  --vitest-c-sponsor-hover: #e51370;
 }

docs/src/code_example.md

@@ -17,4 +17,14 @@ And a simple task:
 
 ````@ansi
 printstyled("this is my color"; color = :red)
+````
+
+A more colorful example for [documenter](https://documenter.juliadocs.org/stable/showcase/#Raw-ANSI-code-output):
+
+````@ansi
+for color in 0:15
+    print("\e[38;5;$color;48;5;$(color)m  ")
+    print("\e[49m", lpad(color, 3), " ")
+    color % 8 == 7 && println()
+end
 ````

docs/src/getting_started.md

@@ -15,13 +15,13 @@ DocumenterVitepress/
 └─ README.md
 ```
 
-## Installation
+## VitePress Installation
 
 ### Prerequisites
 
 From the [VitePress manual](https://vitepress.dev/guide/getting-started#installation).
 
-- [Node.js](https://nodejs.org/en) version 18 or higher.
+- [Node.js](https://nodejs.org/en) version 20 or higher.
 - Terminal for accessing VitePress via its command line interface (CLI).
 - Text Editor with Markdown syntax support.
     - [VSCode](https://code.visualstudio.com) is recommended, along with the official [Vue extension](https://marketplace.visualstudio.com/items?itemName=Vue.volar).
@@ -31,23 +31,94 @@ VitePress can be used on its own, or be installed into an existing project. In b
 ::: code-group
 
 ```sh [npm]
-$ npm add -D vitepress
+npm add -D vitepress
 ```
 
 ```sh [pnpm]
-$ pnpm add -D vitepress
+pnpm add -D vitepress
 ```
 
 ```sh [yarn]
-$ yarn add -D vitepress
+yarn add -D vitepress
 ```
 
 ```sh [bun]
-$ bun add -D vitepress
+bun add -D vitepress
 ```
 
 :::
 
+## Generate docs template
+
+### `package.json`
+
+```sh [vitepress]
+npx vitepress init
+```
+
+This will create a `package.json` file, necessary for vitepress to know from where start building your docs. Set it to `build`. Your `.json` file should look like:
+
+```
+{
+  "scripts": {
+    "docs:dev": "vitepress dev build",
+    "docs:build": "vitepress build build",
+    "docs:preview": "vitepress preview build"
+  }
+}
+```
+
+
+### `package-lock.json`
+
+Also, install [vitetest](https://vitest.dev/guide/#adding-vitest-to-your-project) with
+
+```sh [vitetest]
+npm install -D vitest
+```
+
+this will generate the `package-lock.json` necessary to install dependencies later on. 
+
+```
+{
+  "name": "DocumenterVitepress.jl",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {...
+    }
+}
+```
+
+For `tabs` and `math` install the following packages.
+
+### Tabs and Math
+
+```sh
+npm i -D vitepress-plugin-tabs
+```
+
+```sh
+npm add -D markdown-it markdown-it-mathjax3
+```
+
+Note that also `package.json` as been updated.
+
+```
+{
+  "scripts": {
+    "docs:dev": "vitepress dev build",
+    "docs:build": "vitepress build build",
+    "docs:preview": "vitepress preview build"
+  },
+  "devDependencies": {
+    "markdown-it": "^14.0.0",
+    "markdown-it-mathjax3": "^4.3.2",
+    "vitepress": "^1.0.0-rc.41",
+    "vitepress-plugin-tabs": "^0.5.0",
+    "vitest": "^1.2.0"
+  }
+}
+```
 
 Then, to start working on your docs do the following steps:
 
@@ -89,6 +160,7 @@ docs/
     └─ getting_started.md
 └─ make.jl
 └─ package.json
+└─ package-lock.json
 └─ Project.toml
 ```
 

package.json

@@ -5,6 +5,7 @@
     "docs:preview": "vitepress preview docs/docs_site"
   },
   "devDependencies": {
+    "markdown-it": "^14.0.0",
     "markdown-it-mathjax3": "^4.3.2",
     "vitepress": "^1.0.0-rc.41",
     "vitepress-plugin-tabs": "^0.5.0",