PHPackages                             php-collective/djot-grammars - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. php-collective/djot-grammars

ActiveLibrary[Utility & Helpers](/categories/utility)

php-collective/djot-grammars
============================

Syntax highlighting grammars for the Djot markup language

2584↓85.5%1JavaScriptCI passing

Since Mar 25Pushed 3mo ago1 watchersCompare

[ Source](https://github.com/php-collective/djot-grammars)[ Packagist](https://packagist.org/packages/php-collective/djot-grammars)[ RSS](/packages/php-collective-djot-grammars/feed)WikiDiscussions master Synced 3w ago

READMEChangelogDependenciesVersions (8)Used By (1)

Djot Grammars
=============

[](#djot-grammars)

[![Tests](https://github.com/php-collective/djot-grammars/actions/workflows/test.yml/badge.svg)](https://github.com/php-collective/djot-grammars/actions/workflows/test.yml)

Syntax highlighting grammars for the [Djot](https://djot.net) markup language.

Included Grammars
-----------------

[](#included-grammars)

### TextMate Grammar

[](#textmate-grammar)

> **Note:** As of [Phiki v2.1.1](https://github.com/phikiphp/phiki/releases/tag/v2.1.1), the Djot grammar is bundled with Phiki. For PHP projects, use Phiki directly - no separate grammar installation needed. This file is kept for backwards compatibility with existing Shiki/Node.js projects.

**Location:** `textmate/djot.tmLanguage.json`

Works with:

- [Shiki](https://shiki.style/) (VitePress, Astro, etc.)
- VS Code (via TextMate support)
- TextMate and compatible editors
- IntelliJ/PhpStorm (via [Djot plugin](https://plugins.jetbrains.com/plugin/18828-djot))

#### Usage with Shiki (Node.js)

[](#usage-with-shiki-nodejs)

```
import { createHighlighter } from 'shiki'
import djotGrammar from 'djot-grammars/textmate/djot.tmLanguage.json'

const highlighter = await createHighlighter({
  themes: ['github-light'],
  langs: [djotGrammar],
})

const html = highlighter.codeToHtml(code, { lang: 'djot', theme: 'github-light' })
```

#### Usage with VitePress

[](#usage-with-vitepress)

```
// .vitepress/config.ts
import { defineConfig } from 'vitepress'
import djotGrammar from 'djot-grammars/textmate/djot.tmLanguage.json'

export default defineConfig({
  markdown: {
    languages: [
      { ...djotGrammar, name: 'djot', aliases: ['dj'] },
    ],
  },
})
```

#### Usage with Phiki (PHP)

[](#usage-with-phiki-php)

As of Phiki v2.1.1, Djot is bundled - just use it directly:

```
use Phiki\Phiki;

$phiki = new Phiki();
$html = $phiki->codeToHtml($djotCode, 'djot', 'github-light');
```

---

### highlight.js Grammar

[](#highlightjs-grammar)

**Location:** `highlightjs/djot.js`

Works with [highlight.js](https://highlightjs.org/) for client-side syntax highlighting.

#### Usage

[](#usage)

```

hljs.highlightAll();
```

```

# Hello World

This is *strong* and _emphasized_ text.

```

---

### Prism.js Grammar

[](#prismjs-grammar)

**Location:** `prismjs/djot.js`

Works with [Prism.js](https://prismjs.com/) for client-side syntax highlighting.

#### Usage

[](#usage-1)

```

```

```

# Hello World

This is *strong* and _emphasized_ text.

```

---

### Tiptap Integration

[](#tiptap-integration)

**Location:** `tiptap/`

WYSIWYG editor integration for [Tiptap](https://tiptap.dev) with Djot serialization.

#### Quick Start

[](#quick-start)

```
import { Editor } from '@tiptap/core'
import { DjotKit, serializeToDjot } from 'djot-grammars/tiptap'

const editor = new Editor({
  element: document.getElementById('editor'),
  extensions: [DjotKit],
  onUpdate: ({ editor }) => {
    const djot = serializeToDjot(editor.getJSON())
    console.log(djot)
  },
})
```

#### Features

[](#features)

- **DjotKit** - All-in-one extension bundle with full Djot support
- **Custom marks** - Insert `{+text+}`, Delete `{-text-}`, Div containers `:::`
- **Serializer** - Convert editor content to Djot markup
- Tables, task lists, code blocks with language, images, links

See [tiptap/README.md](tiptap/README.md) for full documentation. [Demo](https://sandbox.dereuromark.de/sandbox/djot/wysiwyg).

---

External Grammars
-----------------

[](#external-grammars)

These Djot grammars are maintained in other repositories:

GrammarRepositoryDescription**tree-sitter**[treeman/tree-sitter-djot](https://github.com/treeman/tree-sitter-djot)For Neovim, Helix, and other tree-sitter editors**Vim**[jgm/djot](https://github.com/jgm/djot/tree/main/editors/vim)Official Vim syntax file**Emacs**[jgm/djot](https://github.com/jgm/djot/tree/main/editors/emacs)Official Emacs major mode**Sublime Text**[sorairolake/djot.sublime-syntax](https://github.com/sorairolake/djot.sublime-syntax)Sublime Text syntax (archived)---

Supported Syntax
----------------

[](#supported-syntax)

All grammars support the full [Djot specification](https://htmlpreview.github.io/?https://github.com/jgm/djot/blob/master/doc/syntax.html) plus [djot-php](https://github.com/php-collective/djot-php) enhancements:

### Block Elements

[](#block-elements)

- Headings (`# Title` through `###### Title`)
- Code fences (````` with optional language)
- Div blocks (`:::` with optional class)
- Blockquotes (`> text`)
- Lists (bullets `-`, `*`, `+` and numbered `1.`, `1)`)
- Task lists (`- [ ]`, `- [x]`)
- Definition lists (`: term`)
- Tables (`| cell | cell |` with separator rows)
- Line blocks (`| text` for poetry/addresses)
- Horizontal rules (`---`, `***`, `___`)
- Block attributes (`{.class #id key=value}`)

### Inline Elements

[](#inline-elements)

- Strong (`*bold*`)
- Emphasis (`_italic_`)
- Highlight (`{=text=}`)
- Insert (`{+text+}`)
- Delete (`{-text-}`)
- Superscript (`^text^`, `{^text^}`)
- Subscript (`~text~`, `{~text~}`)
- Inline code (``code``)
- Links (`[text](url)`, `[text][ref]`)
- Images (`![alt](url)`)
- Autolinks (``, ``)
- Footnotes (`[^note]` and `[^note]: definition`)
- Math (`$` ``code`` `$` and `$$` ``code`` `$$`)
- Symbols (`:name:`)
- Spans with attributes (`[text]{.class}`)
- Raw format markers (``code`{=html}`)
- Escape sequences (`\*`, `\[`, etc.)
- Hard line breaks (`\` at end of line)
- Smart punctuation (`---`, `--`, `...`)

### djot-php Extensions

[](#djot-php-extensions)

- Captions (`^ caption text` for images, tables, blockquotes)
- Fenced comments (`%%%` blocks)
- Inline comments (`{% comment %}`)
- Table row/cell attributes (`| cell |{.class}`)

---

Installation
------------

[](#installation)

### NPM

[](#npm)

```
npm install djot-grammars
```

### Composer (PHP)

[](#composer-php)

```
composer require php-collective/djot-grammars
```

### Manual

[](#manual)

Download the grammar files directly from this repository.

---

Comparison
----------

[](#comparison)

FeatureTextMatehighlight.jsPrism.jsTiptaptree-sitterTypeSyntax highlightingSyntax highlightingSyntax highlightingWYSIWYG editorSyntax highlightingRenderingServer/ClientClientClientClientServer/EditorJS requiredDependsYesYesYesNoUsed byShiki, VS Codehighlight.jsPrism.jsTiptap/ProseMirrorNeovim, HelixThemesVS Code themes90+8+Custom CSSEditor themesExtensibleLimitedSomeExtensiveYesYes> **Note:** [Phiki](https://github.com/phikiphp/phiki) v2.1.1+ bundles the Djot grammar directly.

---

Testing
-------

[](#testing)

Run the test suite to validate all grammars:

```
npm run test:install  # Install test dependencies
npm test              # Run grammar tests
```

The test suite validates TextMate, highlight.js, and Prism.js grammars against a comprehensive Djot syntax fixture covering all language elements.

---

Contributing
------------

[](#contributing)

Contributions are welcome! Please ensure any changes maintain compatibility with the [Djot specification](https://djot.net).

License
-------

[](#license)

MIT License - see [LICENSE](LICENSE) for details.

Related Projects
----------------

[](#related-projects)

- [Djot](https://djot.net) - The Djot markup language
- [djot-php](https://github.com/php-collective/djot-php) - PHP implementation
- [djot.js](https://github.com/jgm/djot.js) - JavaScript implementation
- [djot-intellij](https://github.com/php-collective/djot-intellij) - IntelliJ/PhpStorm plugin

###  Health Score

28

—

LowBetter than 52% of packages

Maintenance55

Moderate activity, may be stable

Popularity21

Limited adoption so far

Community12

Small or concentrated contributor base

Maturity19

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/39854?v=4)[Mark Scherer](/maintainers/dereuromark)[@dereuromark](https://github.com/dereuromark)

---

Top Contributors

[![dereuromark](https://avatars.githubusercontent.com/u/39854?v=4)](https://github.com/dereuromark "dereuromark (32 commits)")

### Embed Badge

![Health badge](/badges/php-collective-djot-grammars/health.svg)

```
[![Health](https://phpackages.com/badges/php-collective-djot-grammars/health.svg)](https://phpackages.com/packages/php-collective-djot-grammars)
```

###  Alternatives

[aksw/rdfauthor

RDFauthor creates formular widgets out of RDFa-enhanced webpages.

188.7k1](/packages/aksw-rdfauthor)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)