Skip to content
| Marketplace
Sign in
Visual Studio Code>Programming Languages>Jekyll Syntax SupportNew to Visual Studio Code? Get it now.
Jekyll Syntax Support

Jekyll Syntax Support

ginfuru

|
48,819 installs
| (1) | Free
Jekyll Syntax Highlighting for Visual Studio Code
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Deprecated

Starting to decommission this project in favor of Liquid Language Support by panoply, it has a lot of great features.

syntax package for Visual Studio Code.

GitHub release

Inspired by jekyll-atom

So this plugin was inspired by @Arcath's Atom plugin. So the roadmap will be to add the same "grammars" available for Atom inside of Visual Studio Code.

Forked from vscode-liquid

I'm using this as a basis to add Jekyll specific syntax highlighting support - for those curious as to why a new plugin... well that's because I plan on adding more that just front-matter support.

Using Emmet

If you want to use Emmet with Jekyll (HTML) you'll need to add the below to your users settings or workspace settings (the scss part is optional):

  "emmet.includeLanguages":{
    "jekyll": "html",
    "scss": "css"
  }

Theme support

~~Front-Matter support in VSCode color schemes is limited, currently, but hopefully that changes over time. You can check out the two VSCode color themes/schemes below to see the improvements:~~ With the edition of the include source.yaml color scheme/theme support is pretty universal.

  • Better Solarized Dark
    • VSCode Marketplace
    • Repo
  • One Dark Rain Coat
    • VSCode Marketplace
    • Repo

If you'd like to add support to your color scheme add the following to your color schemes .json file

    {
      "name": "Jekyll Tags Front Matter",
      "scope": [
        "punctuation.output.jekyll",
        "punctuation.tag.jekyll",
        "frontmatter.jekyll"
      ],
      "settings": {
        "foreground": "#SOME_COLOR_YOU_LINK"
      }
    },

OR

    {
      "name": "Jekyll Tags",
      "scope": [
        "punctuation.output.jekyll",
        "punctuation.tag.jekyll"
      ],
      "settings": {
        "foreground": "#SOME_COLOR_YOU_LINK"
      }
    },
    {
      "name": "Jekyll Front Matter",
      "scope": [
        "frontmatter.jekyll"
      ],
      "settings": {
        "foreground": "#SOME_COLOR_YOU_LINK"
      }
    },

TODO:

  • [ ] add pictures
  • [ ] add Jekyll JSON
  • [ ] add Jekyll XML
  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2023 Microsoft