Download "Ocean" theme for Prism.js syntax highlighting

Download “Ocean” theme syntax highlighting for Prism.js that you see being used on my site.

I use Boxy Theme plugin’s ocean theme for Sublime Text 3. Wanted to crete the same theme for Prism.js syntax highlighting. As you probably could tell, I used the same type of color scheme for my website. Ocean syntax highlighting matches quite nicely.

There’s a lot of Prism.js themes out already but I wanted to offer this download to you guys as one of my first posts to the new site. So why not put my new Prism.js theme to use? I’ve posted the entire scss file below using the Ocean theme.

Install

Compile SCSS to CSS then just replace with your current prism.css (make sure to back up the old file).

Ocean Theme SCSS

/*!
 * Prism.js - Ocean Theme CSS
 * SCSS style based on "Boxy Theme - Ocean" from Sublime Text 3.
 * @author Justin Mathew
 */

// Color Vars
$ocean: #1b2b34;
$ocean-alt: #293841;
$ocean-alt2: #3c4a51;
$grey: #65737e;
$red: #f06557;
$orange: #f98146;
$yellow: #fac854;
$green: #99c794;
$aqua: #54b3b3;
$blue: #4387cc;
$purple: #c594c5;

// Code Blocks
code[class*="language-"],
pre[class*="language-"] {
  color: $grey;
  background: none;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  tab-size: 4;
  hyphens: none;
}
pre[class*="language-"] {
  margin: 0 0 2rem;
  padding: 2em 1em;
  overflow: auto;
  font-size: 16px;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
  background: $ocean;
}
code[class*="language-"] {
  color: #ccc;
}

// Inline Code
:not(pre) > code[class*="language-"] {
  padding: .1em;
  border-radius: .3em;
  white-space: normal;
}

// Namespace
.namespace {
  // opacity: .7;
}

// Token
.token {
  &.comment,
  &.prolog,
  &.doctype,
  &.cdata {
    color: $grey;
  }
  .punctuation {
    color: $aqua;
  }
  &.property,
  &.tag,
  &.boolean,
  &.number,
  &.constant,
  &.symbol,
  &.deleted {
    color: $red;
  }
  &.selector,
  &.attr-name,
  &.string,
  &.char,
  &.builtin,
  &.inserted {
    color: $purple;
  }
  &.operator,
  &.entity,
  &.url {
    color: $green;
    background: hsla(0, 0%, 100%, .5);
  }
  &.atrule,
  &.attr-value,
  &.keyword {
    color: $green;
  }
  &.function {
    color: $blue;
  }
  &.regex,
  &.important,
  &.variable {
    color: $purple;
  }
  &.bold {
    font-weight: bold;
  }
  &.italic {
    font-style: italic;
  }
  &.entity {
    cursor: help;
  }
}

// PHP Syntax
code[class*="language-php"] {
  .token {
    &.delimiter {
      color: $aqua;
    }
    &.keyword {
      color: $blue;
    }
    &.string {
      color: $green;
    }
  }
}

// CSS Syntax
code[class*="language-css"] {
  color: $orange;
  .token {
    &.property {
      color: $yellow;
    }
    &.important {
      color: $orange !important;
    }
    &.punctuation {
      color: #ccc;
    }
  }
}

// Pre
pre {
  &.line-numbers {
    position: relative;
    padding-left: 3.8em;
    counter-reset: linenumber;
    & > code {
      position: relative;
        white-space: inherit;
    }
  }
  &.code-toolbar {
    position: relative;
    & > .toolbar {
      position: absolute;
      top: .2em;
      right: .2em;
      a {
        cursor: pointer;
      }
      button {
        background: none;
        border: 0;
        color: inherit;
        font: inherit;
        line-height: normal;
        overflow: visible;
        padding: 0;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
      }
      a,
      button,
      span {
        border: 2px solid $ocean-alt;
        padding: 0 6px;
        display: inline-block;
        border-radius: 4px;
        color: $grey;
        text-transform: uppercase;
        font-size: 13px;
        &:hover {
          border-color: lighten($ocean-alt, 5%);
          color: lighten($grey, 8%);
        }
      }
      .toolbar-item {
        display: inline-block;
      }
    }
  }
}

// Line Numbers
.line-numbers {
  .line-numbers-rows {
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.8em;
    width: 3em; /* works for line-numbers below 1000 lines */
    letter-spacing: -1px;
    border-right: 1px dotted $ocean-alt2;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    & > span {
      pointer-events: none;
      display: block;
      counter-increment: linenumber;
      &:before {
        content: counter(linenumber);
        color: $grey;
        display: block;
        padding-right: 0.8em;
        text-align: right;
      }
    }
  }
}

Justin Mathew

A front end web developer specializing in HTML/CSS, JS, PHP & MySQL with over 10 years experience in the web development field.