Embeds Elixir syntax into HTML (requires a syntax to be installed, which provides `source.elixir`).

HTML (Surface).sublime-syntax

%YAML 1.2
---
name: HTML (Surface)
scope: text.html.surface
version: 2

# if no JS/CSS is needed
extends: Packages/HTML/HTML (Plain).sublime-syntax 

# Full HTML support including JS/CSS highlighting
# may need further treatment to support embedded Elixir in CSS/JS though.
# extends: Packages/HTML/HTML.sublime-syntax 

file_extensions:
  - sface

contexts:

###[ HTML TAGS ]##############################################################

  prototype:
    - meta_prepend: true
    - include: elixir-embedded

  tag-attribute-value-content:
    - meta_prepend: true
    - include: elixir-interpolations

  strings-common-content:
    - meta_prepend: true
    - include: elixir-interpolations

###[ HTML BUGFIX ]############################################################

  tag-class-attribute-value:
    - meta_prepend: true
    - meta_include_prototype: false

  tag-generic-attribute-value:
    - meta_prepend: true
    - meta_include_prototype: false

  tag-href-attribute-value:
    - meta_prepend: true
    - meta_include_prototype: false

  tag-id-attribute-value:
    - meta_prepend: true
    - meta_include_prototype: false

###[ ELIXIR INTERPOLATIONS ]##################################################

  elixir-embedded:
    - match: \{
      scope: punctuation.section.embedded.begin.elixir
      push: elixir-embedded-body

  elixir-embedded-body:
    - meta_scope: meta.embedded.html source.elixir.embedded.html
    - match: \}
      scope: punctuation.section.embedded.end.elixir
      pop: 1
    - include: scope:source.elixir
      apply_prototype: true

  elixir-interpolations:
    - match: \{
      scope: punctuation.section.interpolation.begin.elixir
      push: elixir-interpolation-body

  elixir-interpolation-body:
    - clear_scopes: 1 # clear string scope
    - meta_scope: meta.interpolation.html source.elixir.embedded.html
    - match: \}
      scope: punctuation.section.interpolation.end.elixir
      pop: 1
    - include: scope:source.elixir
      apply_prototype: true

syntax_test_surface.sface

| SYNTAX TEST "HTML (Surface).sublime-syntax"

<Component prop1={:prop1 = {1, 2}} prop2={:prop2}>
|          ^^^^^^^^^^^^^^^^^^^^^^^ meta.tag.other.html meta.attribute-with-value.html
|                                 ^ meta.tag.other.html - meta.attribute-with-value
|                                  ^^^^^^^^^^^^^^ meta.tag.other.html meta.attribute-with-value.html
|                ^^^^^^^^^^^^^^^^^ meta.string.html meta.interpolation.html source.elixir.embedded.html
|                ^ punctuation.section.interpolation.begin.elixir
|                                ^ punctuation.section.interpolation.end.elixir
|                                  ^^^^^ entity.other.attribute-name.html
|                                        ^^^^^^^^ meta.string.html meta.interpolation.html source.elixir.embedded.html
|                                        ^ punctuation.section.interpolation.begin.elixir
|                                               ^ punctuation.section.interpolation.end.elixir

<span>{gettext("Hello world")}</span>
|     ^^^^^^^^^^^^^^^^^^^^^^^^ meta.embedded.html source.elixir.embedded.html
|     ^ punctuation.section.embedded.begin.elixir
|                            ^ punctuation.section.embedded.end.elixir