Electron Highlighter

Electron highlighter is a dark syntax theme based off of the iconic One Dark theme from Atom, with a more vibrant color palette.

Palette

Colors

#f7768e

#ffbf7a

#fffa9e

#34febb

#4ff2f8

#82aaff

#c792ea

Grays

#141820

#212836

#506686

#99a3b8

#a8b5d1

#f8fafd

Ports

Electron Highlighter is available for the following platforms:

Neovim VS Code Insomnia Kitty Alacritty Ghostty Hyper iTerm 2 tmux Fish Shell Terminal.app

Examples

Below you can check out some examples of the color scheme being used in common languages.

Note: The code examples below are using the PrismJS syntax highlighter. The actual syntax highlighting in your editor may look different.

CSS

:root {
  --font-base: 16px;
}
.someClass {
  font-family: serif;
  font-size: var(--font-base);
}

#someID {
  background: yellow;
  display: flex;
}

main {
  margin-top: 20px;
}

input[type="text"] {
  border-radius: 0;
  -webkit-border-radius: 0;
}

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>

  <body>
    <div id="app" class="tacos">Tacos Tacos</div>

    <p>Tacos tacos tacos</p>
    <!--comment-->
  </body>

</html>

JavaScript

'use strict'
class Sale {
  constructor(price) {
    ;[this.decoratorsList, this.price] = [[], price]
  }

  decorate(decorator) {
    if (!Sale[decorator]) throw new Error(`decorator does not exist: ${decorator}`)
    this.decoratorsList.push(Sale[decorator])
  }

  static async remotePrice(price) {
    return await Promise.all([fetch(`/api/convert/${price}`)])
  }

  getPrice() {
    for (let decorator of this.decoratorsList) {
      this.price = decorator(this.price)
    }
    return this.price.toFixed(2)
  }

  static quebec(price) {
    // this is a comment
    return price + price * 7.5 / 100
  }

  static fedtax(price) {
    return price + price * 5 / 100
  }
}

Go

import (
  "fmt"
  "strings"
)

type deck []string

func newDeck() deck {
  cards := deck{}

  cardSuits := []string{"Spades", "Diamonds", "Hearts", "Clubs"}
  cardValues := []string{"Ace", "Two", "Three", "Four", "Five"}

  for _, suit := range cardSuits {
    for _, value := range cardValues {
      cards = append(cards, value+" of "+suit)
    }
  }

  return cards
}

Python

from collections import deque
def topo(G, ind=None, Q=[1]):
    if ind == None:
        ind = [0] * (len(G) + 1) #this is a comment
        for u in G:
            for v in G[u]:
                ind[v] += 1
        Q = deque()
        for i in G:
            if ind[i] == 0:
                Q.append(i)
    if len(Q) == 0:
        return
    v = Q.popleft()
    print(v)
    for w in G[v]:
        ind[w] -= 1
        if ind[w] == 0:
            Q.append(w)
    topo(G, ind, Q)

Ruby

module ExampleModule
  class ExampleClass::ScopeResolution < NewScope::Operator

    def initialize(options)
      @@class_var = options[:class]
      @instance_var = options[:instance]
    end

    def method
      puts 'doing stuff'
      yield if block_given?
      other_method(:arg)
    end

    def self.class_method
      return "I am a class method!"
    end

    private

    def other_method(*args)
      puts 'doing other stuff #{42}'
    end

    def self.private
      [1, 2, 3].each do |item|
        puts item
      end
    end

    private_class_method :private
  end
end

ExampleModule::ExampleClass::ScopeResolution
example_instance = ExampleModule::ExampleClass::ScopeResolution.new(:arg)

example_instance.method(:arg) do
  puts 'yielding in block!'
end

Rust

fn main() {
    let mut mutable_binding = 1;

    println!("Before mutation: {}", mutable_binding);

    // Ok
    mutable_binding += 1;

    println!("After mutation: {}", mutable_binding);
}

Markdown

# Electron Highlighter Theme

> Electron Highlighter Theme for Atom

![Preview](images/preview.jpg)

# Installation

1.  Install [Atom](https://atom.io/)
2.  Launch Atom
3.  Open **Preferences** > **Install**
4.  Search for `electron-highlighter-syntax`
5.  Click **Install** to install it
6.  Preferences > Themes > Syntax Theme > **Electron Highlighter**


- lists
- more stuff
- it's a list mkay

TypeScript

import { Component, OnInit, OnDestroy } from '@angular/core'
import { Person, SearchService } from '../shared'
import { ActivatedRoute } from '@angular/router'
import { Subscription } from 'rxjs'

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit, OnDestroy {
  query: string
  searchResults: Array<Person>
  sub: Subscription

  constructor(
    private searchService: SearchService,
    private route: ActivatedRoute
  ) {}

  ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
      if (params['term']) {
        this.query = decodeURIComponent(params['term'])
        this.search()
      }
    })
  }

  search(): void {
    this.searchService.search(this.query).subscribe(
      (data: any) => {
        this.searchResults = data
      },
      error => console.log(error)
    )
  }

  ngOnDestroy() {
    if (this.sub) {
      this.sub.unsubscribe()
    }
  }
}

YAML

language: node_js
node_js:
  - "6"
install:
  - npm install
script:
  - npm test
after_script:
  - npm run coveralls
notifications:
  email:
    on_success: never
    on_failure: always