Methanol

https://methanol.netlify.app
Admin
Methanol is an opinionated, fully customizable static site generator powered by rEFui and MDX,...
Tokens:13,432
Snippets:167
Trust Score:7.6
Update:9 months ago
Show doc for...
Tokens:
Raw
### Methanol First Page Example (MDX)

Source: https://methanol.netlify.app/quick-start

This example shows how to create the first page for your Methanol site using MDX syntax. The file path `pages/index.mdx` automatically maps to the root route `/`. It includes frontmatter for metadata like the title.

```mdx
---
title: Home
---

# Welcome

This is my site.

```

--------------------------------

### Run Methanol for Development (CLI)

Source: https://methanol.netlify.app/quick-start

This command starts the Methanol development server, allowing you to preview your static site locally. It watches for changes and rebuilds automatically. No specific dependencies are required beyond Node.js and npm/npx.

```bash
npx methanol dev
```

```bash
npx methanol dev ./my-docs
```

--------------------------------

### Build and Serve Methanol for Production (CLI)

Source: https://methanol.netlify.app/quick-start

These commands are used to build your static site for production and then serve it locally for preview. `build` generates the static files (typically in `dist/`), and `serve` starts a local server to test the production build.

```bash
npx methanol build
npx methanol serve
```

--------------------------------

### Methanol CLI Commands (Global Install)

Source: https://methanol.netlify.app/reference/cli

Install the Methanol CLI globally for faster startup. Once installed, you can run commands like `methanol dev` directly.

```bash
npm install methanol -g
methanol dev
```

--------------------------------

### Methanol CLI Commands (npx)

Source: https://methanol.netlify.app/reference/cli

Quickly start the Methanol development server, build the project, or serve the production build using `npx`. These commands are executed directly without global installation.

```bash
npx methanol dev      # start dev server
npx methanol build    # build to dist/
npx methanol serve    # serve the production build
```

--------------------------------

### Methanol Build Hook Examples

Source: https://methanol.netlify.app/reference/configuration

Demonstrates the usage of Methanol's build hooks (`preBuild`, `preBundle`, `postBuild`) for customizing the build pipeline. These hooks can be functions or arrays of functions and receive context information, including mutable data objects for sharing state between hooks. The example shows logging build duration and page counts.

```javascript
export default () => ({
	preBuild: ({ data, site }) => {
		data.startedAt = Date.now()
		console.log('Building', site.name)
	},
	preBundle: ({ pages }) => {
		console.log('Rendered pages:', pages.length)
	},
	postBuild: ({ data, pages }) => {
		console.log('Duration (ms):', Date.now() - data.startedAt)
		console.log('Pages:', pages.length)
	}
})
```

--------------------------------

### Install Pagefind Locally (npm)

Source: https://methanol.netlify.app/reference/search

Installs Pagefind as a development dependency locally within your project using npm. This is the recommended method for most projects.

```bash
npm i -D pagefind

```

--------------------------------

### Install Pagefind Globally (npm)

Source: https://methanol.netlify.app/reference/search

Installs Pagefind globally on your system using npm. This allows you to use Pagefind commands from any project directory.

```bash
npm i -g pagefind

```

--------------------------------

### External Link Example - Markdown

Source: https://methanol.netlify.app/guide/links

Illustrates how to create an external link using Markdown syntax in the Methanol project. Full URLs should be used for external websites.

```markdown
[Example](https://example.com)
```

--------------------------------

### Reactive rEFui Component Demo for Web

Source: https://methanol.netlify.app/advanced/refui

This example showcases a standalone rEFui application for web development, demonstrating reactive components using signals and a DOM renderer. It includes a counter that updates the UI in real-time. This is useful for experimenting with rEFui's capabilities outside the Methanol framework.

```javascript
import { signal } from 'refui'
import { createDOMRenderer } from 'refui/dom'
import { defaults } from 'refui/browser'

const DOMRenderer = createDOMRenderer(defaults)

const App = () => {
	const count = signal(0)
	const increment = () => {
		count.value += 1
	}

	return (R) => (
		<>
			<h1>Hello, rEFui</h1>
			<button on:click={increment}>Click me! Count is {count}</button>
			<p>Double: {$(() => count.value * 2)}</p>
		</>
	)
}

DOMRenderer.render(document.body, App)

```

--------------------------------

### Methanol Dev with Input Directory

Source: https://methanol.netlify.app/reference/cli

For the Methanol development server, only the input directory is required. This command starts the dev server using the specified input path.

```bash
npx methanol dev ./pages
```

--------------------------------

### Frontmatter Configuration Example

Source: https://methanol.netlify.app/reference/frontmatter

This code snippet demonstrates a typical frontmatter block used to configure page metadata, including title, ordering weight, visibility, root status, exclusion, date, and starryNight settings. It controls page presentation and build behavior.

```yaml
---
title: Guides
weight: 10
hidden: false
isRoot: true
exclude: false
date: 2025-01-01
starryNight: true
---

```

--------------------------------

### Using a Custom Component (MDX)

Source: https://methanol.netlify.app/advanced/components

This example shows how to import and use the custom 'Callout' component within an MDX file. The component is invoked with a 'title' prop and content passed as children, demonstrating its integration into the document.

```mdx
<Callout title="Tip">
  Keep paragraphs short for scannable docs.
</Callout>
```

--------------------------------

### Rendering Navigation Nodes from Pages Tree

Source: https://methanol.netlify.app/advanced/mdx-runtime

This example demonstrates how to traverse the `ctx.pagesTree` structure to render navigation elements. It maps over the top-level nodes, displaying their `title` or `name`. This is useful for building navigation UIs that mirror the site's structure.

```mdx
{ctx.pagesTree.map((node) => (
  <div>{node.title || node.name}</div>
))}

```

--------------------------------

### Markdown Frontmatter Example

Source: https://methanol.netlify.app/guide/writing

Demonstrates the use of frontmatter in Markdown, which is enclosed in triple dashes (---) at the beginning of a file. It's used for metadata like title and excerpt, and is parsed before the main content.

```markdown
---
title: My Page
excerpt: Short summary used in meta tags
---

# My Page

Write your content here.

```

--------------------------------

### Accessing Page Frontmatter and Excerpt

Source: https://methanol.netlify.app/advanced/mdx-runtime

This example shows how to access specific properties from the `ctx.page.frontmatter` object, such as the `title` and `excerpt`. It uses optional chaining (`?.`) to safely access nested properties, preventing errors if `ctx.page` or `frontmatter` are undefined.

```mdx
{ctx.page?.title}
{ctx.page?.frontmatter?.excerpt}

```

--------------------------------

### Language Index Frontmatter Example

Source: https://methanol.netlify.app/reference/frontmatter

This example shows how to configure frontmatter for a language index page. It sets the display title, language identifier, language code for HTML attributes, marks it as a root, and hides it from navigation. This is typically used for the main page of a language-specific section.

```yaml
---
title: 简体中文
lang: 简体中文
langCode: zh
isRoot: true
hidden: true
---

```

--------------------------------

### Install vite-plugin-pwa

Source: https://methanol.netlify.app/guide/offline

Installs the vite-plugin-pwa package as a development dependency using npm. This package is essential for enabling PWA offline capabilities.

```bash
npm install vite-plugin-pwa -D

```

--------------------------------

### Internal Link Example - Markdown

Source: https://methanol.netlify.app/guide/links

Demonstrates how to create an internal link using Markdown syntax in the Methanol project. Links are based on file route paths without extensions. If a page is moved or renamed, the route in the link must be updated.

```markdown
[Writing basics](/guide/writing)
```

--------------------------------

### Markdown Blockquote Formatting

Source: https://methanol.netlify.app/guide/writing

Shows how to create blockquotes in Markdown using the greater-than symbol (>). Multiple lines starting with '>' form a single block, and blank lines between '>' lines create new blockquote blocks.

```markdown
> This is a blockquote.
> 
> Put `>` on an empty line to keep a blank line inside the same quote.
> Multiple quoted lines become one quote block.

> A blank line between `>` blocks creates a new quote block.

```

--------------------------------

### Add Extra Languages for Starry Night

Source: https://methanol.netlify.app/reference/code-highlighting

Extend Starry Night's grammar support by importing and including additional language grammars in the `starryNight.grammars` configuration. This requires installing `@wooorm/starry-night` and importing specific grammar files.

```javascript
import { common } from '@wooorm/starry-night'
import sourceMDX from '@wooorm/starry-night/source.mdx'

export default () => ({
	starryNight: {
		grammars: [...common, sourceMDX]
	}
})
```

--------------------------------

### Methanol CLI Direct Execution

Source: https://methanol.netlify.app/reference/cli

Run the Methanol CLI directly using Node.js without relying on `npx` or a global installation. This method is useful for understanding the CLI's internal structure or in specific execution environments.

```bash
node node_modules/methanol/bin/methanol.js dev
```

--------------------------------

### Define a Basic JSX Component with rEFui

Source: https://methanol.netlify.app/advanced/refui

This snippet demonstrates how to define a simple functional component using JSX syntax, which Methanol compiles with rEFui. The component accepts props and children, rendering them within a div element with a 'callout' class. It's a foundational example for creating UI elements.

```javascript
export default function Callout(props, ...children) {
	return <div class="callout">{...children}</div>
}

```

--------------------------------

### Methanol Build with Input/Output Args

Source: https://methanol.netlify.app/reference/cli

Specify input and output directories as positional arguments for the Methanol build command. The order of arguments is important.

```bash
npx methanol build ./pages ./dist
```

--------------------------------

### Local File Structure for Page Assets

Source: https://methanol.netlify.app/guide/assets

Illustrates how to organize local assets, such as images, alongside their corresponding page files. This approach uses relative paths for linking.

```tree
pages/
  guide/
    writing.mdx
    writing-diagram.png

```

--------------------------------

### Linking Local Page Assets with Relative Paths

Source: https://methanol.netlify.app/guide/assets

Demonstrates how to link to local assets (e.g., images) using relative paths within an MDX file. This is useful for assets that are specific to a particular page or section.

```markdown
![Diagram](./writing-diagram.png)

```

--------------------------------

### Generating a List of All Pages

Source: https://methanol.netlify.app/advanced/mdx-runtime

This snippet iterates over the `ctx.pages` array, which contains metadata for all pages in the project. It generates an unordered list of links, where each link points to a page's `routeHref` or `routePath` and displays the page's `title`.

```mdx
<ul>
  {ctx.pages.map((page) => (
    <li><a href={page.routeHref || page.routePath}>{page.title}</a></li>
  ))}
</ul>

```

--------------------------------

### Enable Code Highlighting via CLI

Source: https://methanol.netlify.app/reference/code-highlighting

Use the command-line interface to enable code highlighting for a one-off build by passing the `--code-highlighting` flag. This is useful for quick testing or specific build processes.

```bash
npx methanol build --code-highlighting
```

--------------------------------

### Markdown Body Text Formatting

Source: https://methanol.netlify.app/guide/writing

Illustrates Markdown syntax for body text, including paragraph separation with blank lines, automatic newline merging, and forced line breaks using trailing spaces or `<br />` tags in MDX.

```markdown
First paragraph line 1
First paragraph line 2 (usually merges into the same paragraph)

Second paragraph
This line has two trailing spaces  
so it breaks

```

--------------------------------

### Markdown Fenced Code Block

Source: https://methanol.netlify.app/guide/writing

Demonstrates the creation of fenced code blocks in Markdown, which are initiated with triple backticks (```) followed by an optional language identifier. This allows for syntax highlighting.

```markdown
```js
export const title = 'Hello'
```

```

--------------------------------

### Displaying Previous and Next Page Links

Source: https://methanol.netlify.app/advanced/mdx-runtime

This code snippet utilizes the `ctx.getSiblings()` helper to retrieve the previous and next pages in the current navigation sequence. It conditionally renders 'Previous' and 'Forward' links, including the page title, only if the sibling pages exist.

```mdx
{(() => {
  const siblings = ctx.getSiblings?.()
  if (!siblings) return null
  return (
    <nav>
      {siblings.prev ? <a href={siblings.prev.routeHref || siblings.prev.routePath}>Previous: {siblings.prev.title}</a> : null}
      {siblings.next ? <a href={siblings.next.routeHref || siblings.next.routePath}>Forward: {siblings.next.title}</a> : null}
    </nav>
  )
})()}

```

--------------------------------

### Public Folder Asset Structure

Source: https://methanol.netlify.app/guide/assets

Demonstrates the directory structure for static assets placed in the `public/` folder. These files are served from the site root. Assets can include images, PDFs, and other downloadable files.

```tree
public/
  logo.png
  downloads/
    brochure.pdf

```

--------------------------------

### Linking Public Folder Assets in MDX

Source: https://methanol.netlify.app/guide/assets

Shows how to reference assets located in the `public/` folder using Markdown syntax within MDX files. This allows for easy integration of images and links to downloadable files.

```markdown
![Logo](/logo.png)
[Download the brochure](/downloads/brochure.pdf)

```

--------------------------------

### Use Counter Component in MDX

Source: https://methanol.netlify.app/guide/components

Shows how to include the 'Counter' component in an MDX file. The system will automatically determine whether to use the client or static version based on the rendering context.

```mdx
<Counter />
```

--------------------------------

### Global Styles and Scripts Injection

Source: https://methanol.netlify.app/guide/assets

Explains how Methanol injects global styles and scripts by placing specific files in the `pages/` directory. `pages/style.css` is injected as a stylesheet, and `pages/index.js` or `pages/index.ts` are injected as module scripts.

```html
<link rel="stylesheet" href="/style.css" />
<script type="module" src="/index.js"></script>

```

--------------------------------

### Use Callout Component in MDX

Source: https://methanol.netlify.app/guide/components

Demonstrates how to embed the 'Callout' component directly within an MDX file. This allows for inline display of tips or important notes.

```mdx
<Callout>
  Tip: Keep sections short and focused.
</Callout>
```

--------------------------------

### Client-Only Component Marker

Source: https://methanol.netlify.app/advanced/components

Components marked with the '.client' suffix are intended to run exclusively on the client-side. This is particularly useful for components that depend on browser-specific APIs or functionalities.

```treeview
components/ThemeSearch.client.jsx
```

--------------------------------

### Configure Pagefind Options (Methanol)

Source: https://methanol.netlify.app/reference/search

Configures Pagefind with specific options within the methanol.config.js file. This includes enabling the search, setting excerpt length, and configuring build output. Other keys are passed directly to the Pagefind UI.

```javascript
export default () => ({
	pagefind: {
		enabled: true,
		excerptLength: 30,
		build: {
			outputSubdir: 'pagefind',
			verbose: true
		}
	}
})

```

--------------------------------

### Displaying Page Title and Route using Context

Source: https://methanol.netlify.app/advanced/mdx-runtime

This snippet demonstrates how to access and display the current page's title and route path using the injected `ctx` object within an MDX file. It uses conditional rendering for the title if `frontmatter.title` is not present.

```mdx
# {frontmatter.title ?? ctx.page?.title}

Current route: {ctx.routePath}

```

--------------------------------

### Directory Structure for Multi-language Content

Source: https://methanol.netlify.app/reference/languages

Illustrates a typical file structure for organizing content across multiple languages. Each language has its own directory containing localized content, with an index file for each language root.

```tree
pages/
  index.mdx          # root language
  zh/
    index.mdx        # Chinese language root
    guide.mdx
  fr/
    index.mdx        # French language root
    guide.mdx
```

--------------------------------

### Enable Code Highlighting via methanol.config.js

Source: https://methanol.netlify.app/reference/code-highlighting

Configure Methanol to enable code highlighting by setting `starryNight` to `true` in your `methanol.config.js` file. This is the primary method for global configuration.

```javascript
export default () => ({
	starryNight: true
})
```

--------------------------------

### Injecting Unescaped HTML with rawHTML

Source: https://methanol.netlify.app/advanced/mdx-runtime

The `rawHTML` helper allows for the injection of raw, unescaped HTML strings into the MDX output. This is useful for including elements like badges, banners, or inline scripts that should not be processed by the MDX renderer.

```mdx
{rawHTML('<span class="badge">Beta</span>')}
{rawHTML(`<div data-banner="true">Banner</div>`)}

```

--------------------------------

### Enable Pagefind in Methanol Config

Source: https://methanol.netlify.app/reference/search

Enables the Pagefind search functionality by setting the 'pagefind' key to true in the methanol.config.js file. This is the default configuration for enabling search.

```javascript
// methanol.config.js
export default () => ({
	pagefind: true
})

```

--------------------------------

### Override Code Highlighting Per-Page

Source: https://methanol.netlify.app/reference/code-highlighting

Control code highlighting for individual pages by using frontmatter. Setting `starryNight: true` in the frontmatter will enable highlighting for that specific page, overriding global settings.

```yaml
---
starryNight: true
---
```

--------------------------------

### Component File Naming Convention

Source: https://methanol.netlify.app/advanced/components

Methanol discovers components based on their file names in the 'components/' directory. The file extension determines the language, and the base name of the file becomes the component's name. User components with the same name will override theme components.

```treeview
components/
  Callout.jsx
  Hero.client.jsx
  Toc.static.jsx
```

--------------------------------

### Pagefind Configuration in Methanol

Source: https://methanol.netlify.app/reference/configuration

Configuration for the Pagefind search functionality. It can be enabled by setting `pagefind` to `false` (disabling it) or to an object with `enabled: true`. Additional options can be provided within the `pagefind` object, which are forwarded to the Pagefind JS `options()` call. The `build` sub-object specifically configures build-time options.

```javascript
pagefind: false
```

```javascript
pagefind: { enabled: true }
```

```javascript
pagefind: {
	enabled: true,
	excerptLength: 30,
	build: {
		outputSubdir: 'pagefind',
		verbose: true
	}
}
```

--------------------------------

### Integrate Custom Highlighter

Source: https://methanol.netlify.app/reference/code-highlighting

Replace Starry Night with a custom highlighter by first disabling Starry Night globally and then adding your preferred MDX plugin to the `mdx` configuration in `methanol.config.js`. Ensure your custom plugin is compatible with the MDX pipeline.

```javascript
export default () => ({
	starryNight: false,
	mdx: () => ({
		rehypePlugins: [/* your highlighter */]
	})
})
```

--------------------------------

### Methanol.js Configuration with Vite and Tailwind CSS

Source: https://methanol.netlify.app/reference/configuration

This JavaScript code configures a Methanol.js project. It sets site metadata, customizes the HTML template using raw HTML and JSX, defines custom components, enables MDX development mode based on the build environment, and configures the Vite server with the Tailwind CSS plugin.

```javascript
import tailwindcss from '@tailwindcss/vite'

export default ({ mode }) => ({
	site: { name: 'My Docs' },
	theme: {
		root: '.',
		template: ({ Page, ExtraHead, ctx, HTMLRenderer, components }) => (
			<>
				{HTMLRenderer.rawHTML`<!doctype html>`}
				<html lang="en">
					<head>
						<meta charset="UTF-8" />
						<meta name="viewport" content="width=device-width" />
						<ExtraHead />
						<title>{ctx.page?.title || ctx.site?.name}</title>
					</head>
					<body>
						{components?.Callout ? <components.Callout>Hi</components.Callout> : null}
						<Page />
					</body>
				</html>
			</>
		),
		components: {
			Callout: ({ children }) => <div class="callout">{children}</div>
		}
	},
	mdx: () => ({
		development: mode !== 'production'
	}),
	vite: () => ({
		server: { port: 5173 },
		plugins: [tailwindcss()]
	})
})
```

--------------------------------

### Static Component Marker

Source: https://methanol.netlify.app/advanced/components

Components with the '.static' suffix are evaluated during the build process. If a client-only component lacks a server or static counterpart, Methanol will attempt to statically render it. However, for components using browser-only APIs, a corresponding static component is necessary for server rendering.

```treeview
components/Notice.static.jsx
```

--------------------------------

### StarryNight Code Highlighting Configuration

Source: https://methanol.netlify.app/reference/configuration

Controls code highlighting using the `rehype-starry-night` plugin. It can be disabled by default (`false`), enabled (`true`), or configured with specific options passed to `rehype-starry-night`. If `starryNight` is an object, highlighting is enabled unless explicitly set to `enabled: false`. This setting can be overridden by per-page frontmatter or CLI flags.

```javascript
starryNight: false
```

```javascript
starryNight: true
```

```javascript
starryNight: {
	// options forwarded to rehype-starry-night
}
```

--------------------------------

### Create a Static Counter Component (Server-Side JSX)

Source: https://methanol.netlify.app/guide/components

A placeholder 'Counter' component for static server-side rendering. It informs the user that JavaScript is required to load the interactive version.

```jsx
// components/Counter.static.jsx
export default function Counter({ initial = 0 }) {
	return (
		<div>
			[ You need to enable JavaScript to load this component. ]
		</div>
	)
}
```

--------------------------------

### Inject Content into HTML Head using Methanol's Head Component

Source: https://methanol.netlify.app/reference/head

The Head component from Methanol allows users to inject custom HTML elements directly into the document's <head> section. This is useful for SEO tags like meta descriptions and canonical links. Ensure your theme renders the `<ExtraHead />` component for this to function correctly. No imports are needed as Head is globally available in .mdx files.

```mdx
<Head>
	<meta name="description" content="My page description" />
	<link rel="canonical" href="https://example.com/docs/page" />
</Head>

```

--------------------------------

### Defining a Custom Component (JSX)

Source: https://methanol.netlify.app/advanced/components

This snippet demonstrates how to define a custom component named 'Callout' using JSX. It accepts a 'title' prop and renders a div with the 'callout' class. The component structure includes a strong tag for the title and a div for child content.

```jsx
// components/Callout.jsx
export default function Callout({ title }, ...children) {
	return (
		<div class="callout">
			<strong>{title}</strong>
			<div>{...children}</div>
		</div>
	)
}
```

--------------------------------

### Configure vite-plugin-pwa for Offline Access

Source: https://methanol.netlify.app/guide/offline

Configures vite-plugin-pwa within methanol.config.js to enable offline access. It specifies caching strategies for common web assets and sets a fallback route to '/404.html' for unmatched requests.

```javascript
import { VitePWA } from 'vite-plugin-pwa'

export default () => ({
	vite: {
		plugins: [
			VitePWA({
				injectRegister: 'auto',
				registerType: 'autoUpdate',
				workbox: {
					globPatterns: ['**/*.{js,css,html,ico,png,svg}'],
					navigateFallback: '/404.html',
					ignoreURLParametersMatching: [/./]
				}
			})
		]
	}
})

```

--------------------------------

### Structure of ctx.languages Entry

Source: https://methanol.netlify.app/reference/languages

Defines the expected structure of an entry within the 'ctx.languages' array, which lists available language configurations. This includes the route path, URL, display label, and language code.

```json
{
	"routePath": "/zh",
	"href": "/zh/",
	"label": "简体中文",
	"code": "zh"
}
```

--------------------------------

### Create a Reusable Callout Component (JSX)

Source: https://methanol.netlify.app/guide/components

Defines a simple 'Callout' component that can be used to display highlighted information within MDX content. It accepts children and renders them inside a div with the class 'callout'.

```jsx
// components/Callout.jsx
export default function Callout(props, ...children) {
	return <div class="callout">{...children}</div>
}
```

--------------------------------

### Methanol Configuration File Structure

Source: https://methanol.netlify.app/reference/configuration

Methanol reads configuration from files named `methanol.config.{js,mjs,cjs,ts,jsx,tsx,mts,cts}`. If no config file is found, Methanol uses default settings based on the current directory. The configuration file must export a function that accepts a context object and returns a configuration object.

```javascript
methanol.config.{js,mjs,cjs,ts,jsx,tsx,mts,cts}
```

```javascript
export default ({ mode, root, HTMLRenderer }) => ({
	// config values
})
```

--------------------------------

### Disable Code Highlighting via CLI

Source: https://methanol.netlify.app/reference/code-highlighting

Use the command-line interface to disable code highlighting for a one-off build by passing the `--code-highlighting false` flag. This overrides any global configuration for a specific build.

```bash
npx methanol build --code-highlighting false
```

--------------------------------

### Disable Pagefind in Methanol Config

Source: https://methanol.netlify.app/reference/search

Explicitly disables the Pagefind search functionality by setting the 'pagefind' key to false in the methanol.config.js file. This is useful if you intend to use a different search solution or disable search entirely.

```javascript
// methanol.config.js
export default () => ({
	pagefind: false
})

```

--------------------------------

### Create an Interactive Counter Component (Client-Side JSX)

Source: https://methanol.netlify.app/guide/components

An interactive 'Counter' component designed for client-side rendering. It uses a signal for state management and includes buttons to increment and decrement a count. It also imports CSS.

```jsx
// components/Counter.client.jsx
import './Counter.css'
import { signal } from 'refui'

export default function Counter({ initial = 0 }) {
	const count = signal(initial)
	return (
		<div class="counter">
			<button on:click={() => count.value--}>-</button>
			<span>{count}</span>
			<button on:click={() => count.value++}>+</button>
		</div>
	)
}
```

--------------------------------

### Disable Code Highlighting via methanol.config.js

Source: https://methanol.netlify.app/reference/code-highlighting

Explicitly disable code highlighting in Methanol by setting `starryNight` to `false` in your `methanol.config.js` file. This ensures code blocks are rendered without syntax highlighting.

```javascript
export default () => ({
	starryNight: false
})
```
Tokens:
Raw