https://github.com/orionlee/codemirror-js-mixed

Javascript-mixed mode for CodeMirror, supporting HTML/CSS highlighting in javascript codes
https://github.com/orionlee/codemirror-js-mixed

addon codemirror codemirror-mode css editor html javascript syntax-highlighting userscript

Last synced: about 1 month ago
JSON representation

Javascript-mixed mode for CodeMirror, supporting HTML/CSS highlighting in javascript codes

• Host: GitHub
• URL: https://github.com/orionlee/codemirror-js-mixed
• Owner: orionlee
• License: mit
• Created: 2020-08-10T23:31:10.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2024-08-13T18:39:02.000Z (9 months ago)
• Last Synced: 2025-03-31T02:33:56.748Z (about 2 months ago)
• Topics: addon, codemirror, codemirror-mode, css, editor, html, javascript, syntax-highlighting, userscript
• Language: JavaScript
• Homepage:
• Size: 359 KB
• Stars: 4
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![NPM version](https://img.shields.io/npm/v/codemirror-js-mixed?color=blue)](https://www.npmjs.com/package/codemirror-js-mixed)

# Javascript-mixed mode for CodeMirror

A language mode for [CodeMirror](https://codemirror.net/), support highlighting HTML/CSS in javascript codes.

## Features

- Detects and highlights HTML in strings / template strings. (for strings begin with a tag)

    - HTML, highlights inner CSS / Javascript as well, e.g., highlights CSS for the text in `` tags.

- Highlights CSS for userscript's `GM_addStyle()`

- Highlights arbitrary template strings as HTML / CSS by prepending an inline `/*html*/` and `/*css*/` hint respectively.

![screenshot](https://user-images.githubusercontent.com/250644/87232467-299d0380-c374-11ea-80af-539d65248ed7.png)

## Installation

To add it to your project, assuming `codemirror` has been installed:

```

npm install codemirror-js-mixed

```