https://github.com/harttle/codemirror-lang-liquid

Liquid language package for CodeMirror 6
https://github.com/harttle/codemirror-lang-liquid

codemirror demo liquid

Last synced: about 2 months ago
JSON representation

Liquid language package for CodeMirror 6

• Host: GitHub
• URL: https://github.com/harttle/codemirror-lang-liquid
• Owner: harttle
• License: mit
• Created: 2023-09-10T09:49:34.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-09-23T03:11:40.000Z (over 1 year ago)
• Last Synced: 2024-10-14T20:43:21.817Z (3 months ago)
• Topics: codemirror, demo, liquid
• Language: TypeScript
• Homepage: https://harttle.land/codemirror-lang-liquid/
• Size: 176 KB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# Liquid language package for CodeMirror 6

Live demo: https://harttle.land/codemirror-lang-liquid/

## Get Started

```javascript

import {EditorView, basicSetup} from "codemirror"

import {LiquidHTML} from "codemirror-lang-liquid"

const doc = `{% layout "main.liquid" with "dark", url: "/" %}`

new EditorView({

  doc,

  extensions: [basicSetup, LiquidHTML({

    filterNames: ["customFilter"],

    tagNames: ["customTag"],

    variableNames: ["foo", "bar"]

  })],

  parent: document.body

})

```

Demos:

- JavaScript: https://github.com/harttle/codemirror-lang-liquid/tree/main/demo

- React: https://github.com/harttle/codemirror-react-demo

## API

- `Liquid`: `LanguageSupport` for pure Liquid language.

- `LiquidHTML`: `LanguageSupport` for Liquid used to create HTML.

## Contribute

### Build & test

```bash

npm run build

npm test

```

### Build demo page

You'll need to build `codemirror-lang-liquid` first. Then link current project to demo:

```bash

npm link

cd demo && npm link codemirror-lang-liquid && cd ..

```

Build & run demo (in parent directory):

```bash

npm run build:demo

npm run start:demo

```