Skip to content

Add Svelte syntax highlighting

What does this MR do and why?

Add Svelte Syntax highlighting to blob and diff views using highlight.js.

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Before After
image image

How to set up and validate locally

  1. Create a .svelte file with some javascript, typescript, css, and scss. Example provided.
Example for Svelte Example Code

<script lang="ts">
  import { slide } from 'svelte/transition';

  export let background: string;
  export let title: string;
  export let text: string;

  $: if(true) {
    // https://svelte.dev/tutorial/reactive-statements
    console.log('this is a reactive statement', title, text)
  }

  let reveal = false;
</script>

<script>
  async function doStuff() {
    console.log('I\'m doin stuff!')
  }
</script>

<script context="module">
  async function doStuff() {
    console.log('I\'m doin stuff!')
  }
</script>

<!-- this is an HTML comment -->

{#each cats as { id, name }, i}
  <li>
    <a target="_blank" href="https://www.youtube.com/watch?v={id}" rel="noreferrer">
      {i + 1}: {name}
    </a>
  </li>
{/each}

{#await promise}
	<p>...waiting</p>
{:then number}
	<p>The number is {number}</p>
{:catch error}
	<p style="color: red">{error.message}</p>
{/await}

{@debug user}

{@html '<!--Hello-->'}


{#if x > 10}
	<p>{x} is greater than 10</p>
{:else if 5 > x}
	<p>{x} is less than 5</p>
{:else}
	<p>{x} is between 5 and 10</p>
{/if}


<style>
  .awesome {
    color: red !important;
  }
</style>


<style lang="scss">
  @mixin button-base() {
    @include typography(button);
    @include ripple-surface;
    @include ripple-radius-bounded;
  
    display: inline-flex;
    position: relative;
    height: $button-height;
    border: none;
    vertical-align: middle;
  
    &:hover {
      cursor: pointer;
    }
  
    &:disabled {
      color: $mdc-button-disabled-ink-color;
      cursor: default;
      pointer-events: none;
    }
  }
</style>


<style type="text/scss">
  @mixin button-base() {
    @include typography(button);
    @include ripple-surface;
    @include ripple-radius-bounded;
  
    display: inline-flex;
    position: relative;
    height: $button-height;
    border: none;
    vertical-align: middle;
  
    &:hover {
      cursor: pointer;
    }
  
    &:disabled {
      color: $mdc-button-disabled-ink-color;
      cursor: default;
      pointer-events: none;
    }
  }
</style>
  1. Load blob view of file. Verify syntax highlighting is accurate for each sub-language.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #195631 (closed)

Edited by Brodie Davis

Merge request reports