Mustache Inline Highlighter

English

Syntax highlighting for Mustache templates embedded in TypeScript and JavaScript strings.

Features

This extension adds syntax highlighting for Mustache expressions ({{variable}}, {{#section}}, etc.) directly in your TypeScript/JavaScript strings, making your code more readable and maintainable.

Before

After

Supported Syntax

✅ Variables: {{name}}, {{user.email}}
✅ Sections: {{#items}}...{{/items}}
✅ Inverted sections: {{^items}}...{{/items}}
✅ Comments: {{! comment }}
✅ Partials: {{>header}}

Supported Languages

TypeScript (.ts, .tsx)
JavaScript (.js, .jsx)

The extension works in:

String literals: "{{name}}"
Template literals: `{{name}}`
Multiline strings

Configuration

The extension is fully customizable through VS Code settings.

Available Settings

Setting	Type	Default	Description
`mustacheInline.colors.brackets`	string	`#C586C0`	Color for braces `{{` and `}}`
`mustacheInline.colors.keywords`	string	`#C586C0`	Color for control keywords `#`, `^`, `/`
`mustacheInline.colors.variables`	string	`#9CDCFE`	Color for variables and names
`mustacheInline.colors.embedded`	string	`#4EC9B0`	Color for complete Mustache zone
`mustacheInline.fontStyle.brackets`	string	`bold`	Font style for braces
`mustacheInline.fontStyle.keywords`	string	`bold`	Font style for keywords

Customization

Via GUI

Open settings: Ctrl+, (Windows/Linux) or Cmd+, (Mac)
Search for "Mustache Inline"
Modify colors according to your preferences

Via settings.json

{
  "mustacheInline.colors.brackets": "#FF6B6B",
  "mustacheInline.colors.keywords": "#4ECDC4",
  "mustacheInline.colors.variables": "#FFE66D",
  "mustacheInline.colors.embedded": "#95E1D3",
  "mustacheInline.fontStyle.brackets": "bold",
  "mustacheInline.fontStyle.keywords": "bold italic"
}

Predefined Color Themes

Default Theme (Dark+)

{
  "mustacheInline.colors.brackets": "#C586C0",
  "mustacheInline.colors.keywords": "#C586C0",
  "mustacheInline.colors.variables": "#9CDCFE",
  "mustacheInline.colors.embedded": "#4EC9B0"
}

Ocean Theme

{
  "mustacheInline.colors.brackets": "#89DDFF",
  "mustacheInline.colors.keywords": "#C792EA",
  "mustacheInline.colors.variables": "#82AAFF",
  "mustacheInline.colors.embedded": "#8BD5CA"
}

Warm Theme

{
  "mustacheInline.colors.brackets": "#F78C6C",
  "mustacheInline.colors.keywords": "#FF5370",
  "mustacheInline.colors.variables": "#FFCB6B",
  "mustacheInline.colors.embedded": "#C3E88D"
}

Commands

Command	Description
`Mustache Inline: Apply Colors`	Manually reapply configured colors

To execute a command: Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac)

Usage Examples

TypeScript

const template = `
  <h1>{{title}}</h1>
  {{#users}}
    <div class="user">
      <span>{{name}}</span>
      <span>{{email}}</span>
    </div>
  {{/users}}
  {{^users}}
    <p>Aucun utilisateur</p>
  {{/users}}
`;

JavaScript

const greeting = "Hello {{user.name}}, you have {{notifications}} notification(s).";

const html = `
  <div>
    {{! This is a comment }}
    {{>header}}
    <main>{{content}}</main>
    {{>footer}}
  </div>
`;

Installation

From Local Folder

Copy the extension folder to .vscode/extensions/mustache-inline/
Reload VS Code: Ctrl+Shift+P → "Developer: Reload Window"

From Workspace

The extension is automatically loaded if located in the .vscode/extensions/ folder of your workspace.

Troubleshooting

Colors Are Not Applying

Check that the extension is activated: open debug console (Help → Toggle Developer Tools)
Look for the message: "Mustache Inline Highlighter est activé"
Execute manually: Ctrl+Shift+P → "Mustache Inline: Apply Colors"
Reload window: Ctrl+Shift+P → "Developer: Reload Window"

Colors Don't Change After Modification

Wait a few seconds (application is automatic)
If necessary, execute "Mustache Inline: Apply Colors"
Verify that hexadecimal values are valid (e.g., #FF0000)

Conflict With Other Extensions

If you have other Mustache highlighting extensions, disable them to avoid conflicts:

Ctrl+Shift+X → Extensions
Search for Mustache extensions
Disable conflicting extensions

Contributing

This extension is developed for internal use. For any suggestions or bugs:

Check that the issue doesn't already exist
Provide a code example reproducing the problem
Include your configuration (mustacheInline.* settings)

License

Changelog

1.0.0 (2025-10-06)

🎉 Initial release
✨ Syntax highlighting for Mustache in TS/JS strings
⚙️ Complete color and style configuration
🎨 Custom theme support
🔧 Manual reapplication command

Resources

Enjoy coding with beautiful Mustache templates! 🎨✨

Français

Coloration syntaxique pour les templates Mustache intégrés dans les chaînes de caractères TypeScript et JavaScript.

Fonctionnalités

Cette extension ajoute la coloration syntaxique pour les expressions Mustache ({{variable}}, {{#section}}, etc.) directement dans vos strings TypeScript/JavaScript, rendant votre code plus lisible et maintenable.

Avant

Après

Syntaxe supportée

✅ Variables : {{name}}, {{user.email}}
✅ Sections : {{#items}}...{{/items}}
✅ Sections inversées : {{^items}}...{{/items}}
✅ Commentaires : {{! commentaire }}
✅ Partials : {{>header}}

Langages supportés

TypeScript (.ts, .tsx)
JavaScript (.js, .jsx)

L'extension fonctionne dans :

Les string literals : "{{name}}"
Les template literals : `{{name}}`
Les strings multilignes

Configuration

L'extension est entièrement personnalisable via les paramètres VS Code.

Paramètres disponibles

Paramètre	Type	Défaut	Description
`mustacheInline.colors.brackets`	string	`#C586C0`	Couleur des accolades `{{` et `}}`
`mustacheInline.colors.keywords`	string	`#C586C0`	Couleur des mots-clés de contrôle `#`, `^`, `/`
`mustacheInline.colors.variables`	string	`#9CDCFE`	Couleur des variables et noms
`mustacheInline.colors.embedded`	string	`#4EC9B0`	Couleur de la zone Mustache complète
`mustacheInline.fontStyle.brackets`	string	`bold`	Style de police des accolades
`mustacheInline.fontStyle.keywords`	string	`bold`	Style de police des mots-clés

Personnalisation

Via l'interface graphique

Ouvrez les paramètres : Ctrl+, (Windows/Linux) ou Cmd+, (Mac)
Recherchez "Mustache Inline"
Modifiez les couleurs selon vos préférences

Via settings.json

{
  "mustacheInline.colors.brackets": "#FF6B6B",
  "mustacheInline.colors.keywords": "#4ECDC4",
  "mustacheInline.colors.variables": "#FFE66D",
  "mustacheInline.colors.embedded": "#95E1D3",
  "mustacheInline.fontStyle.brackets": "bold",
  "mustacheInline.fontStyle.keywords": "bold italic"
}

Thèmes de couleurs prédéfinis

Thème par défaut (Dark+)

{
  "mustacheInline.colors.brackets": "#C586C0",
  "mustacheInline.colors.keywords": "#C586C0",
  "mustacheInline.colors.variables": "#9CDCFE",
  "mustacheInline.colors.embedded": "#4EC9B0"
}

Thème Océan

{
  "mustacheInline.colors.brackets": "#89DDFF",
  "mustacheInline.colors.keywords": "#C792EA",
  "mustacheInline.colors.variables": "#82AAFF",
  "mustacheInline.colors.embedded": "#8BD5CA"
}

Thème Chaleureux

{
  "mustacheInline.colors.brackets": "#F78C6C",
  "mustacheInline.colors.keywords": "#FF5370",
  "mustacheInline.colors.variables": "#FFCB6B",
  "mustacheInline.colors.embedded": "#C3E88D"
}

Commandes

Commande	Description
`Mustache Inline: Apply Colors`	Réapplique manuellement les couleurs configurées

Pour exécuter une commande : Ctrl+Shift+P (Windows/Linux) ou Cmd+Shift+P (Mac)

Exemples d'utilisation

TypeScript

const template = `
  <h1>{{title}}</h1>
  {{#users}}
    <div class="user">
      <span>{{name}}</span>
      <span>{{email}}</span>
    </div>
  {{/users}}
  {{^users}}
    <p>Aucun utilisateur</p>
  {{/users}}
`;

JavaScript

const greeting = "Bonjour {{user.name}}, vous avez {{notifications}} notification(s).";

const html = `
  <div>
    {{! Ceci est un commentaire }}
    {{>header}}
    <main>{{content}}</main>
    {{>footer}}
  </div>
`;

Installation

Depuis le dossier local

Copiez le dossier de l'extension dans .vscode/extensions/mustache-inline/
Rechargez VS Code : Ctrl+Shift+P → "Developer: Reload Window"

Depuis un workspace

L'extension est automatiquement chargée si elle se trouve dans le dossier .vscode/extensions/ de votre workspace.

Dépannage

Les couleurs ne s'appliquent pas

Vérifiez que l'extension est activée : ouvrez la console de débogage (Help → Toggle Developer Tools)
Recherchez le message : "Mustache Inline Highlighter est activé"
Exécutez manuellement : Ctrl+Shift+P → "Mustache Inline: Apply Colors"
Rechargez la fenêtre : Ctrl+Shift+P → "Developer: Reload Window"

Les couleurs ne changent pas après modification

Attendez quelques secondes (l'application est automatique)
Si nécessaire, exécutez "Mustache Inline: Apply Colors"
Vérifiez que les valeurs hexadécimales sont valides (ex: #FF0000)

Conflit avec d'autres extensions

Si vous avez d'autres extensions de coloration Mustache, désactivez-les pour éviter les conflits :

Ctrl+Shift+X → Extensions
Recherchez les extensions Mustache
Désactivez les extensions en conflit

Contribution

Cette extension est développée pour un usage interne. Pour toute suggestion ou bug :

Vérifiez que le problème n'existe pas déjà
Fournissez un exemple de code reproduisant le problème
Incluez votre configuration (mustacheInline.* settings)

Licence

Changelog

1.0.0 (2025-10-06)

🎉 Version initiale
✨ Coloration syntaxique pour Mustache dans les strings TS/JS
⚙️ Configuration complète des couleurs et styles
🎨 Support des thèmes personnalisés
🔧 Commande de réapplication manuelle

Ressources

Profitez du code avec de beaux templates Mustache ! 🎨✨

Name		Name	Last commit message	Last commit date
Latest commit History 1 Commit
README.md		README.md
after.png		after.png
before.png		before.png
extension.js		extension.js
mustache-injection.json		mustache-injection.json
package.json		package.json
screenshots-examples.ts		screenshots-examples.ts

Ayce45/mustache-inline-javascript-typescript-highlighter

Folders and files

Latest commit

History

Repository files navigation

Mustache Inline Highlighter

English

Features

Before

After

Supported Syntax

Supported Languages

Configuration

Available Settings

Customization

Via GUI

Via settings.json

Predefined Color Themes

Default Theme (Dark+)

Ocean Theme

Warm Theme

Commands

Usage Examples

TypeScript

JavaScript

Installation

From Local Folder

From Workspace

Troubleshooting

Colors Are Not Applying

Colors Don't Change After Modification

Conflict With Other Extensions

Contributing

License

Changelog

1.0.0 (2025-10-06)

Resources

Français

Fonctionnalités

Avant

Après

Syntaxe supportée

Langages supportés

Configuration

Paramètres disponibles

Personnalisation

Via l'interface graphique

Via settings.json

Thèmes de couleurs prédéfinis

Thème par défaut (Dark+)

Thème Océan

Thème Chaleureux

Commandes

Exemples d'utilisation

TypeScript

JavaScript

Installation

Depuis le dossier local

Depuis un workspace

Dépannage

Les couleurs ne s'appliquent pas

Les couleurs ne changent pas après modification

Conflit avec d'autres extensions

Contribution

Licence

Changelog

1.0.0 (2025-10-06)

Ressources

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages