Elm Syntax Highlight Themes

Package / GitHub / Demo

• Required Styles

  pre.elmsh {
      padding: 10px;
      margin: 0;
      text-align: left;
      overflow: auto;
  }
  code.elmsh {
      padding: 0;
  }
  .elmsh-line:before {
      content: attr(data-elmsh-lc);
      display: inline-block;
      text-align: right;
      width: 40px;
      padding: 0 20px 0 0;
      opacity: 0.3;
  }

• Monokai

  .elmsh {color: #f8f8f2;background: #23241f;}.elmsh-hl {background: #343434;}.elmsh-add {background: #003800;}.elmsh-del {background: #380000;}.elmsh-comm {color: #75715e;}.elmsh1 {color: #ae81ff;}.elmsh2 {color: #e6db74;}.elmsh3 {color: #f92672;}.elmsh4 {color: #66d9ef;}.elmsh5 {color: #a6e22e;}.elmsh6 {color: #ae81ff;}.elmsh7 {color: #fd971f;}.elmsh-elm-ts, .elmsh-js-dk, .elmsh-css-p {font-style: italic;color: #66d9ef;}.elmsh-js-ce {font-style: italic;color: #a6e22e;}.elmsh-css-ar-i {font-weight: bold;color: #f92672;}

• GitHub

  .elmsh {color: #24292e;background: #ffffff;}.elmsh-hl {background: #fffbdd;}.elmsh-add {background: #eaffea;}.elmsh-del {background: #ffecec;}.elmsh-comm {color: #969896;}.elmsh1 {color: #005cc5;}.elmsh2 {color: #df5000;}.elmsh3 {color: #d73a49;}.elmsh4 {color: #0086b3;}.elmsh5 {color: #63a35c;}.elmsh6 {color: #005cc5;}.elmsh7 {color: #795da3;}

• One Dark

  .elmsh {color: #abb2bf;background: #282c34;}.elmsh-hl {background: rgba(229, 231,235, 0.1);}.elmsh-add {background: rgba(40, 124,82, 0.4);}.elmsh-del {background: rgba(136, 64,67, 0.4);}.elmsh-comm {font-style: italic;color: #5c6370;}.elmsh1 {color: #d19a66;}.elmsh2 {color: #98c379;}.elmsh3 {color: #c678dd;}.elmsh4 {color: #c678dd;}.elmsh5 {color: #61aeee;}.elmsh6 {color: #d19a66;}.elmsh7 {color: #abb2bf;}