CODEWITHSUNDEEP
vimsvelte
jrh
jrh

Reputation: 4193

How can I enable Vim syntax highlighting for multiple languages within the same Svelte file?

I have a Svelte component that uses three different languages within one file. I'd like to have Vim highlight each language inside of (but not including) the appropriate tags.

How can I configure my .vimrc to enable this?

Example:

my-component.sv

<script lang='coffeescript'>
  // Highlight everything in here as CoffeeScript.

  import History from './History'
  import Leader from './Leader'
  import Spinner from './Spinner'

  getBalances = () ->
    response = await fetch('/api/balances')
    await response.json()
</script>

<template lang='pug'>
  // Highlight everything in here as Pug.

  main
    h1 Balance

    +await('getBalances')
      Spinner

      +then
        Leader
        History
</template>

<style lang='stylus'> 
  // Highlight everything in here as Stylus.

  main
    font-family 'Helvetica Neue'

  h1
    font-weight 200

    margin-bottom 10rem
    text-align center
</style>

Upvotes: 2

Views: 1043

Answers (1)

herrbischoff
herrbischoff

Reputation: 3326

Analog to existing plugins for single file components like posva/vim-vue, you'd need a plugin that takes care of context sensitive syntax highlighting, like evanleck/vim-svelte or leafOfTree/vim-svelte-plugin. I cannot attest to the quality of the latter and there might be better alternatives available.

Vim needs rather specific syntax rules but since most of the work is done in the Vue plugin, it should be easy to adapt for Svelte, since the basic SFC syntax appears to be identical. From what I gather, burner/vim-svelte should do what you need.

The official docs are currently rather not helpful with that. They expect you to just have everything being HTML.

Upvotes: 1

Related Questions