{"id":23201567,"url":"https://github.com/xubylele/jinja2-html-enhancer","last_synced_at":"2026-04-28T20:02:36.237Z","repository":{"id":267455493,"uuid":"862981361","full_name":"xubylele/jinja2-html-enhancer","owner":"xubylele","description":"Jinja2 HTML Enhancer is a Visual Studio Code extension that adds syntax highlighting support for the Jinja2 templating language inside .jinja2.html files. It extends the native HTML highlighting with additional rules for Jinja2, allowing seamless editing of templates that mix both HTML and Jinja2.","archived":false,"fork":false,"pushed_at":"2025-01-15T13:48:25.000Z","size":786,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-17T20:49:20.003Z","etag":null,"topics":["vscode-extension","vscode-language","vscode-snippets"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=Xubylele.jinja2-html-enhancer","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xubylele.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"lfx_crowdfunding":null,"polar":null,"buy_me_a_coffee":"xubylelec","thanks_dev":null,"custom":null}},"created_at":"2024-09-25T14:11:33.000Z","updated_at":"2025-01-15T13:48:27.000Z","dependencies_parsed_at":null,"dependency_job_id":"64c38ba5-d8a4-4389-af23-c393d137b753","html_url":"https://github.com/xubylele/jinja2-html-enhancer","commit_stats":null,"previous_names":["xubylele/jinja2-html-enhancer"],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xubylele%2Fjinja2-html-enhancer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xubylele%2Fjinja2-html-enhancer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xubylele%2Fjinja2-html-enhancer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xubylele%2Fjinja2-html-enhancer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xubylele","download_url":"https://codeload.github.com/xubylele/jinja2-html-enhancer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247315637,"owners_count":20919092,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["vscode-extension","vscode-language","vscode-snippets"],"created_at":"2024-12-18T15:15:49.657Z","updated_at":"2026-04-28T20:02:36.232Z","avatar_url":"https://github.com/xubylele.png","language":"TypeScript","funding_links":["https://buymeacoffee.com/xubylelec","https://www.buymeacoffee.com/xubylelec"],"categories":[],"sub_categories":[],"readme":"# Jinja2 Enhance\n\n**Jinja2 Enhance** is a Visual Studio Code extension that adds syntax highlighting support for the Jinja2 templating language inside `.html` files and provides variable checking functionality. It extends the native HTML highlighting with additional rules for Jinja2, allowing seamless editing of templates that mix both HTML and Jinja2.\n\n## Donations\n\nIf you find this extension helpful, consider supporting the developer by buying them a coffee:\n\n\u003ca href=\"https://www.buymeacoffee.com/xubylelec\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/v2/default-blue.png\" alt=\"Buy Me A Coffee\" style=\"height: 60px !important;width: 217px !important;\" \u003e\u003c/a\u003e\n\n## **1.11.0 Has Been Released!**\n\nThis release introduces Jinja2-native comment toggling. Pressing `Ctrl+/` (`Cmd+/` on macOS) in any `.html` file now inserts `{# #}` instead of `\u003c!-- --\u003e`, so your comments are always valid Jinja2 syntax.\n\n## Features\n\n- **Jinja2 Enhance**:\n  - Supports Jinja2 control structures like `{% for %}`, `{% if %}`, `{% block %}`, etc.\n  - Highlights variable interpolation using `{{ }}` syntax.\n  - Keywords like `for`, `if`, `block` are highlighted with a distinct color for better readability.\n  - Pipe filters like `capitalize`, `default`, `length`, `lower`, etc., are highlighted after the pipe (`|`).\n\n- **HTML and Jinja2 Together**:\n  - Maintains the standard HTML syntax highlighting while injecting Jinja2 rules.\n  - Useful for projects that use Jinja2 templating language for dynamic content within HTML.\n\n- **Variable Checking**:\n  - Analyzes Jinja2 templates to identify used and set variables.\n  - Provides warnings for variables that are used but not set within the template.\n  - Recognizes variables set in various contexts, including `{% set %}` statements and `{% for %}` loops.\n  - Automatically checks variables on file save and provides a command to manually trigger checking.\n\n- **UI Variable Panel**:\n  - Displays a panel in the sidebar that shows the variables used and set in the current template.\n  - Update the panel by saving the file or manually triggering variable checking.\n\n- **Save variables in configuration**:\n  - Save the variables in the configuration file to avoid rechecking the variables every time you open the file.\n  - This feature is useful for large files with many variables, and it works with the quick fix vscode feature.\n\n- **Toggle Variable Checking**:\n  - Allows you to toggle the variable checking feature on and off.\n  - Useful for debugging or when you want to temporarily disable variable checking.\n  - Use command \"Toggle check jinja2 variable check\" to toggle the feature.\n  - Use configuration `Toggle check jinja2 variable check` to set the variable checking feature.\n\n- **Jinja2 Comment Toggling**:\n  - Press `Ctrl+/` (`Cmd+/` on macOS) to toggle Jinja2-style comments `{# #}` on the current line or selected lines.\n  - Automatically detects whether a line is already commented and toggles accordingly.\n  - Works with single lines and multi-line selections — all selected lines are commented or uncommented together.\n  - Preserves indentation when adding or removing comment markers.\n\n- **Theme Support**:\n  - Choose from multiple themes for Jinja2 syntax highlighting.\n  - You can select a theme using the command \"Choose Jinja2 Theme\" from the command palette (`Ctrl+Shift+P`).\n  - Themes include:\n    - Dark Default\n    - Light Default\n    - Dark High Contrast\n    - Light High Contrast\n    - Xuby Selection (custom theme)\n  - Also you can change the theme colors on your settings:\n  - Enter `\"editor.tokenColorCustomizations\": { \"textMateRules\": [] }` in your settings.json file.\n\n## Example\n\nHere's an example of the syntax highlighting in action:\n\n![Syntax Highlight Example](https://i.imgur.com/pWahcjc.png)\n\nAnd here's an example of the variable checking and UI variable panel:\n\n![Variable Checking Example](https://i.imgur.com/qk46DYx.png)\n\nAnd here's an example of the variable saving in the configuration file:\n\n![Variable Saving Example](https://i.imgur.com/7ojKh5D.gif)\n\n## Theme Selection\n\nYou can choose from multiple themes for Jinja2 syntax highlighting. To select a theme, use the command \"Choose Jinja2 Theme\" from the command palette (`Ctrl+Shift+P`). The available themes are:\n\nDark Default theme, which provides a dark background with contrasting colors for Jinja2 syntax.\n![Dark Default Theme Example](https://i.imgur.com/1wueoPs.png)\n\nLight Default theme, which provides a light background with contrasting colors for Jinja2 syntax.\n![Light Default Theme Example](https://i.imgur.com/DOOWGA4.png)\n\nDark High Contrast theme, which provides a high contrast dark background for better visibility.\n![Dark High Contrast Theme Example](https://i.imgur.com/iNGNdrC.png)\n\nLight High Contrast theme, which provides a high contrast light background for better visibility.\n![Light High Contrast Theme Example](https://i.imgur.com/BqRi5yp.png)\n\nXuby Selection theme, which is a custom theme with unique colors for Jinja2 syntax.\n![Xuby Selection Theme Example](https://i.imgur.com/gj7j9yQ.png)\n\n## Installation\n\n1. Open Visual Studio Code.\n2. Go to the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of the window or press `Ctrl+Shift+X`.\n3. Search for `Jinja2 Enhance`.\n4. Click **Install**.\n\nAlternatively, you can install the extension from the [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=Xubylele.jinja2-html-enhancer) or the [Open VSX Registry](https://open-vsx.org/extension/xubylele/jinja2-html-enhancer).\n\n[![VS Marketplace](https://img.shields.io/visual-studio-marketplace/v/Xubylele.jinja2-html-enhancer)](https://marketplace.visualstudio.com/items?itemName=Xubylele.jinja2-html-enhancer) [![Open VSX](https://img.shields.io/open-vsx/v/xubylele/jinja2-html-enhancer)](https://open-vsx.org/extension/xubylele/jinja2-html-enhancer)\n\n## Usage\n\n1. Open a file with the `.html` extension.\n2. The extension will automatically apply syntax highlighting to both HTML and Jinja2 templating language.\n3. Variable checking will occur automatically when you save the file.\n4. To manually check variables, use the command \"Check Jinja2 Variables\" from the command palette (`Ctrl+Shift+P`).\n5. The UI variable panel will display the variables, use the command \"Open jinja2 Variable Panel\" to open it.\n6. Warnings for undefined variables will appear as diagnostics in your editor.\n\n## Supported Jinja2 Syntax\n\n- `{% for %}`, `{% if %}`, `{% block %}`, and other control structures.\n- `{{ variable }}` for variable interpolation.\n- `{% extends %}`, `{% include %}`, `{% set %}`, `{% import %}`, `{% macro %}`, and more.\n- Pipe filters like `| capitalize`, `| default`, `| length`, `| lower`, `| upper`, etc.\n\n## Customization\n\nYou can customize the colors used for Jinja2 syntax highlighting by modifying your VSCode theme settings. For example, to change the color of keywords and filters, you can add the following to your settings:\n\n## Roadmap\n\nCurious about what's coming next? Check out the [**Roadmap**](ROADMAP.md) for the full list of planned features — including upcoming free improvements, and what's on the horizon for Pro and Team tiers.\n\n## Contributing\n\nIf you want to contribute to this project, feel free to submit issues or pull requests in the [GitHub repository](https://github.com/xubylele/jinja2-html-enhancer?tab=readme-ov-file)\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE.md) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxubylele%2Fjinja2-html-enhancer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxubylele%2Fjinja2-html-enhancer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxubylele%2Fjinja2-html-enhancer/lists"}