Git Product home page Git Product logo

princess-syntax's Introduction

Princess Syntax Theme

A bright syntax theme, with plenty of pink and purple. It's mostly optimized for Ruby, with occasional JavaScript, CSS, and markup. More improvements will probably be coming, but it's also possible I'll get bored and move on. Use at your own risk.

Ruby syntax example

The font used in the screenshot is Input from FontBureau. It's extremely configurable, so I've linked to my particular settings.

If you'd like your current line to be highlighted, you can add the following snippet to your user stylesheet. It's scoped so that it will affect only this syntax theme, and includes an alternate color suggestion for the highlight line as well.

.theme-princess-syntax {
  @pink-light: #ffb1de;
  @blue: #6be5fd;
  
  @current-line-highlight: fade(@blue, 10);
  
  atom-text-editor.is-focused,
  atom-text-editor.is-focused::shadow,
  :host(.is-focused) {
    .line-number.cursor-line {
      background: @current-line-highlight;
    }
    .line.cursor-line {
      background:@current-line-highlight;
    }
  }
}

If you'd like the look of the centered indent guides shown in the screenshot, rather than the left-aligned ones that Atom defaults to, you can add the following snippet to your user stylesheet:

atom-text-editor, atom-text-editor::shadow, :host {
  // Shift indent guides to align vertically with center of column
  .indent-guide {
    @indent-offset: 4px; // This might need tweaking depending on font and size
    @guide-width: 1px;
    box-shadow: none;
    background: linear-gradient(90deg, // replace box-shadow with gradient
      transparent,
      transparent @indent-offset,
      @syntax-indent-guide-color @indent-offset,
      @syntax-indent-guide-color @indent-offset + @guide-width,
      transparent @indent-offset + @guide-width)
  }
}

princess-syntax's People

Contributors

duien avatar

Stargazers

Barry Morrison avatar Melissa Sorrells avatar Flavia Bastos avatar  avatar Jennifer Lyn Parsons avatar

Watchers

 avatar James Cloos avatar  avatar

Forkers

flaviabastos

princess-syntax's Issues

Deprecated selector in `princess-syntax`

Message in Atom:

Starting from Atom v1.13.0, the contents of atom-text-editor elements are no longer encapsulated within a shadow DOM boundary. This means you should stop using :host and ::shadow pseudo-selectors, and prepend all your syntax selectors with syntax--. To prevent breakage with existing style sheets, Atom will automatically upgrade the following selectors:
-- followed by a list of selectors

Dark version

I like what you've got going on here. Could we get a dark version?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.