How to modify the syntax highlighting in this Jekyll template (flexible-jekyll)

Question

I am writing code tutorials using Github pages + Jekyll, and I would like the code snippets to be displayed in a certain way (black background and monokai boxes would be great).

What I've done so far:

I have been using this template: https://github.com/artemsheludko/flexible-jekyll

I love it so far, it's very nice and easy to modify (I have concretely zero knowledge of html or css, but Jekyll and the template make it particularly easy).

My problem:

The code snippets look like this:

I don't like it too much, and would prefer something like this:

What I tried so far:

I've followed instruction from this answer but with little result (all I got was the box black border disappear).

How to modify this template so I can change the syntax highlighting ?

score 0 · Accepted Answer · answered Jan 15 '22 at 04:23

Someone actually answered my question beautifully, but their answer and comments disappeared :(

For future reference, I will post their solution here.

So they basically modified the main.css file to get the default highlighting back. I just had to copy-paste the following in my own project:

/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */
 html {
  line-height: 1.15;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */
article,
aside,
footer,
header,
nav,
section {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */
figcaption,
figure,
main {
  /* 1 */
  display: block;
}

/**
 * Add the correct margin in IE 8.
 */
figure {
  margin: 1em 0px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent;
  /* 1 */
  -webkit-text-decoration-skip: objects;
  /* 2 */
}

/**
 * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
  font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */
mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
[type="checkbox"],
[type="radio"] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */
details,
menu {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Scripting
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */
template {
  display: none;
}

/* Hidden
   ========================================================================== */
/**
 * Add the correct display in IE 10-.
 */
[hidden] {
  display: none;
}

.highlighter-rouge {
  background-color: #F2F2F2;
  font-weight: 400;
  -webkit-border-radius: 3px;
          border-radius: 3px;
  padding: 0.1rem 0.5rem;
}

.highlight table td { padding: 5px; }
.highlight table pre { margin: 0; }
.highlight .c, .highlight .ch, .highlight .cd, .highlight .cpf {
  color: #75715e;
  font-style: italic;
}
.highlight .cm {
  color: #75715e;
  font-style: italic;
}
.highlight .c1 {
  color: #75715e;
  font-style: italic;
}
.highlight .cp {
  color: #75715e;
  font-weight: bold;
}
.highlight .cs {
  color: #75715e;
  font-weight: bold;
  font-style: italic;
}
.highlight .err {
  color: #960050;
  background-color: #1e0010;
}
.highlight .gi {
  color: #ffffff;
  background-color: #324932;
}
.highlight .gd {
  color: #ffffff;
  background-color: #493131;
}
.highlight .ge {
  color: #000000;
  font-style: italic;
}
.highlight .gr {
  color: #aa0000;
}
.highlight .gt {
  color: #aa0000;
}
.highlight .gh {
  color: #999999;
}
.highlight .go {
  color: #888888;
}
.highlight .gp {
  color: #555555;
}
.highlight .gs {
  font-weight: bold;
}
.highlight .gu {
  color: #aaaaaa;
}
.highlight .k, .highlight .kv {
  color: #66d9ef;
  font-weight: bold;
}
.highlight .kc {
  color: #66d9ef;
  font-weight: bold;
}
.highlight .kd {
  color: #66d9ef;
  font-weight: bold;
}
.highlight .kp {
  color: #66d9ef;
  font-weight: bold;
}
.highlight .kr {
  color: #66d9ef;
  font-weight: bold;
}
.highlight .kt {
  color: #66d9ef;
  font-weight: bold;
}
.highlight .kn {
  color: #f92672;
  font-weight: bold;
}
.highlight .ow {
  color: #f92672;
  font-weight: bold;
}
.highlight .o {
  color: #f92672;
  font-weight: bold;
}
.highlight .mf {
  color: #ae81ff;
}
.highlight .mh {
  color: #ae81ff;
}
.highlight .il {
  color: #ae81ff;
}
.highlight .mi {
  color: #ae81ff;
}
.highlight .mo {
  color: #ae81ff;
}
.highlight .m, .highlight .mb, .highlight .mx {
  color: #ae81ff;
}
.highlight .se {
  color: #ae81ff;
}
.highlight .sa {
  color: #66d9ef;
  font-weight: bold;
}
.highlight .sb {
  color: #e6db74;
}
.highlight .sc {
  color: #e6db74;
}
.highlight .sd {
  color: #e6db74;
}
.highlight .s2 {
  color: #e6db74;
}
.highlight .sh {
  color: #e6db74;
}
.highlight .si {
  color: #e6db74;
}
.highlight .sx {
  color: #e6db74;
}
.highlight .sr {
  color: #e6db74;
}
.highlight .s1 {
  color: #e6db74;
}
.highlight .ss {
  color: #e6db74;
}
.highlight .s, .highlight .dl {
  color: #e6db74;
}
.highlight .na {
  color: #a6e22e;
}
.highlight .nc {
  color: #a6e22e;
  font-weight: bold;
}
.highlight .nd {
  color: #a6e22e;
  font-weight: bold;
}
.highlight .ne {
  color: #a6e22e;
  font-weight: bold;
}
.highlight .nf, .highlight .fm {
  color: #a6e22e;
  font-weight: bold;
}
.highlight .no {
  color: #66d9ef;
}
.highlight .bp {
  color: #f8f8f2;
}
.highlight .nb {
  color: #f8f8f2;
}
.highlight .ni {
  color: #f8f8f2;
}
.highlight .nn {
  color: #f8f8f2;
}
.highlight .vc {
  color: #f8f8f2;
}
.highlight .vg {
  color: #f8f8f2;
}
.highlight .vi {
  color: #f8f8f2;
}
.highlight .nv, .highlight .vm {
  color: #f8f8f2;
}
.highlight .w {
  color: #f8f8f2;
}
.highlight .nl {
  color: #f8f8f2;
  font-weight: bold;
}
.highlight .nt {
  color: #f92672;
}
.highlight {
  color: #f8f8f2;
  background-color: #49483e;
}

/* Literal.Number.Integer.Long */
.css .o,
.css .o + .nt,
.css .nt + .nt {
  color: #999;
}

*, *::after, *::before {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  line-height: 1.5;
}

body {
  font-family: 'Lato', sans-serif;
  color: #515151;
  background-color: #fbfbfb;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 {
  font-weight: 400;
}

img {
  max-width: 100%;
  vertical-align: middle;
  display: inline-block;
}

img + em {
  text-align: center;
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-weight: bold;
  font-size: 14px;
}

blockquote {
  border-left: 5px solid #000;
  padding-left: 1.1rem;
  margin-left: 1rem;
  font-style: italic;
  color: #ada8a8;
}

pre {
  padding: 1rem 2rem;
  overflow: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-all;
}

pre code {
  border: 0;
  padding-right: 0;
  padding-left: 0;
  overflow: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-all;
}

table {
  border: 1px solid #aaa;
  background-color: #eee;
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}

table td, table.blueTable th {
  border: 1px solid #aaa;
  padding: 3px 2px;
}

table tbody td {
  font-size: 13px;
}

table tr:nth-child(even) {
  background: #adbecc;
}

table thead {
  background: #a9c4d1;
  background: -webkit-gradient(linear, left top, left bottom, from(#bed3dc), color-stop(66%, #b1cad5), to(#A9C4D1));
  background: -webkit-linear-gradient(top, #bed3dc 0%, #b1cad5 66%, #A9C4D1 100%);
  background: -o-linear-gradient(top, #bed3dc 0%, #b1cad5 66%, #A9C4D1 100%);
  background: linear-gradient(to bottom, #bed3dc 0%, #b1cad5 66%, #A9C4D1 100%);
  border-bottom: 1px solid #8c8c8c;
}

table thead th {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  border-left: 1px solid #d0e4f5;
}

table thead th:first-child {
  border-left: none;
}

table tfoot {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  background: #d0e4f5;
  background: -webkit-gradient(linear, left top, left bottom, from(#dcebf7), color-stop(66%, #d4e6f6), to(#D0E4F5));
  background: -webkit-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  background: -o-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  background: linear-gradient(to bottom, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  border-top: 2px solid #444;
}

table tfoot td {
  font-size: 14px;
}

.wrapper {
  max-width: 1250px;
  position: relative;
}

.post, .article-page {
  background-color: #fff;
}

::-moz-selection {
  background: rgba(38, 57, 89, 0.8);
  color: #ffffff;
}

::selection {
  background: rgba(38, 57, 89, 0.8);
  color: #ffffff;
}

.clearfix::before, .clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* - - - - - - - - - - Home Page Styles - - - - - - - - - - */
.sidebar {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 240px;
  height: 100%;
  padding: 20px 10px;
  background-color: #ffffff;
}

.about {
  margin: 0 0 40px;
  text-align: center;
}

.about .cover-author-image {
  width: 100px;
  height: 100px;
  margin: 0 auto 10px;
  -webkit-border-radius: 100%;
          border-radius: 100%;
  overflow: hidden;
  background-color: #333030;
}

.about img {
  width: 100%;
  height: 100%;
  -webkit-border-radius: 50%;
          border-radius: 50%;
  -webkit-transition: -webkit-transform 0.35s;
  transition: -webkit-transform 0.35s;
  -o-transition: transform 0.35s;
  transition: transform 0.35s;
  transition: transform 0.35s, -webkit-transform 0.35s;
}

.about img:hover {
  -webkit-transform: scale3d(0.9, 0.9, 1);
          transform: scale3d(0.9, 0.9, 1);
}

.about .author-name {
  font-family: 'PT Serif', serif;
  margin: 0 0 10px;
  position: relative;
  padding-bottom: 15px;
  font-size: 16px;
  text-transform: uppercase;
  color: #333030;
  font-weight: 700;
}

.about .author-name::after {
  content: "";
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  bottom: 0;
  display: block;
  width: 7px;
  height: 7px;
  -webkit-border-radius: 100%;
          border-radius: 100%;
  background-color: #515151;
}

.about p {
  font-size: 16px;
  margin: 0 0 10px;
}

.content-box {
  padding: 20px;
  padding-left: 260px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

.contact .contact-title {
  position: relative;
  color: #333030;
  font-weight: 400;
  font-size: 12px;
  margin: 0 0 5px;
  text-transform: uppercase;
  text-align: center;
}

.contact .contact-title::before {
  content: "";
  display: block;
  height: 2px;
  width: -webkit-calc(50% - 48px);
  width: calc(50% - 48px);
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  position: absolute;
  top: 50%;
  left: 0;
  background-color: #515151;
}

.contact .contact-title::after {
  content: "";
  display: block;
  height: 2px;
  width: -webkit-calc(50% - 48px);
  width: calc(50% - 48px);
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  position: absolute;
  top: 50%;
  right: 0;
  background-color: #515151;
}

.contact ul {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.contact ul li {
  display: inline-block;
  margin-left: 10px;
}

.contact ul li:first-child {
  margin-left: 0;
}

.contact ul li a {
  color: #515151;
  display: block;
  padding: 5px;
  font-size: 18px;
  -webkit-transition: all 350ms cubic-bezier(0.13, 0.43, 0.54, 1.82);
  -o-transition: all 350ms cubic-bezier(0.13, 0.43, 0.54, 1.82);
  transition: all 350ms cubic-bezier(0.13, 0.43, 0.54, 1.82);
}

.contact ul li a:hover {
  color: #333030;
  -webkit-transform: scale(1.2);
      -ms-transform: scale(1.2);
          transform: scale(1.2);
}

footer .copyright {
  font-size: 14px;
  text-align: center;
  margin: 0;
}

.post {
  width: 100%;
  max-width: 100%;
  margin-bottom: 1.5rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  min-height: 11rem;
  -webkit-border-radius: 10px;
          border-radius: 10px;
  overflow: hidden;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
  -webkit-box-shadow: 0 1px 1px 0 rgba(31, 35, 46, 0.15);
          box-shadow: 0 1px 1px 0 rgba(31, 35, 46, 0.15);
}

.post:hover {
  -webkit-transform: translate(0px, -2px);
      -ms-transform: translate(0px, -2px);
          transform: translate(0px, -2px);
  -webkit-box-shadow: 0 15px 45px -10px rgba(10, 16, 34, 0.2);
          box-shadow: 0 15px 45px -10px rgba(10, 16, 34, 0.2);
}

.post .post-thumbnail {
  width: 30%;
  max-width: 100%;
  min-height: 11rem;
  -webkit-background-size: cover;
          background-size: cover;
  background-position: 50% 50%;
}

.post .post-content {
  padding: 1rem;
  width: 70%;
}

.post .post-content .post-date,
.post .post-content .post-words {
  font-size: 12px;
}

.post .post-content .post-title {
  margin: 0 0 10px;
  font-size: 30px;
  font-weight: 400;
}

.post .post-content .post-title a {
  font-family: 'PT Serif', serif;
  text-decoration: none;
  color: #263959;
}

.post .post-content p {
  margin-top: 0;
}

a.older-posts, a.newer-posts {
  font-size: 18px;
  display: inline-block;
  color: #515151;
  -webkit-transition: -webkit-transform .2s;
  transition: -webkit-transform .2s;
  -o-transition: transform .2s;
  transition: transform .2s;
  transition: transform .2s, -webkit-transform .2s;
}

a.older-posts:hover {
  -webkit-transform: translateX(5px);
      -ms-transform: translateX(5px);
          transform: translateX(5px);
}

a.newer-posts:hover {
  -webkit-transform: translateX(-5px);
      -ms-transform: translateX(-5px);
          transform: translateX(-5px);
}

/* - - - - - - - - - - Post Page Styles - - - - - - - - - - */
.wrap-content {
  padding: 20px;
}

.header-page {
  text-align: center;
  margin: 10px 0;
}

.header-page .page-title {
  font-weight: 400;
  margin: 0 0 10px;
  line-height: 1.3;
}

.header-page .page-date {
  color: #a0a0a0;
  font-weight: 300;
  font-size: 12px;
  text-transform: uppercase;
}

.page-cover-image {
  position: relative;
  padding: 0;
  margin: 0;
  max-height: 500px;
  background-color: #fafafa;
  overflow: hidden;
}

.page-cover-image figure {
  position: relative;
  margin: 0;
}

.page-cover-image figcaption {
  position: absolute;
  top: 20px;
  right: 20px;
  padding-left: 20px;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10px;
}

.page-cover-image .page-image {
  width: 100%;
  height: 100%;
}

.page-footer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  padding-bottom: 30px;
  margin: 30px 0;
  border-bottom: 1px solid #a0a0a0;
}

.page-footer .page-share {
  margin-bottom: 10px;
  text-align: left;
}

.page-footer .page-share a {
  display: inline-block;
  text-decoration: none;
  background-color: #fafafa;
  border: 1px solid #ecf0f1;
  padding: 5px 10px;
  margin-left: 5px;
  color: #263959;
  font-size: 12px;
  -webkit-transition: background-color .3s;
  -o-transition: background-color .3s;
  transition: background-color .3s;
}

.page-footer .page-share a:first-child {
  margin-left: 0;
}

.page-footer .page-share a:hover {
  background-color: #ecf0f1;
}

.page-footer .page-tag a {
  text-decoration: none;
  font-size: 10px;
  padding: 5px 10px;
  margin-left: 5px;
  color: #263959;
  text-transform: uppercase;
  border: 1px solid #263959;
}

.page-footer .page-tag a:hover {
  text-decoration: underline;
}

/* - - - - - - - - - - Tag Styles - - - - - - - - - - */
.blog-tags {
  width: 100%;
  background-color: #ffffff;
  padding: 0 20px 20px;
}

.blog-tags h1 {
  font-size: 30px;
  text-align: center;
  line-height: 1.3;
  color: #263959;
}

.blog-tags h2 {
  color: #263959;
  margin: 10px 0;
}

.tags {
  margin: 0;
  padding: 10px;
}

.tags li {
  display: inline-block;
  margin: 5px;
  list-style: none;
}

.tags li a {
  text-decoration: none;
  color: #263959;
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid #ecf0f1;
  background-color: #fafafa;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}

.tags li a:hover {
  background-color: #ecf0f1;
}

.tag-list span a {
  text-decoration: none;
  color: #263959;
}

.tag-list span a:hover {
  text-decoration: underline;
  opacity: .8;
}

/* - - - - - - - - - - Media Styles - - - - - - - - - - */
/* Medium Devices, Desktops */
@media only screen and (max-width: 992px) {
  .post {
    width: 48%;
    max-width: 100%;
    margin: 0 0.9% 1.5%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .post .post-thumbnail {
    width: 100%;
  }
  .post .post-content {
    width: 100%;
  }
  .post .post-content .post-title {
    margin: 0 0 5px;
  }
  .post .post-content .post-title a {
    font-size: 21px;
  }
}

/* Small Devices, Tablets */
@media only screen and (max-width: 768px) {
  .sidebar {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 100%;
    padding: 10px;
    background-color: #ffffff;
    -webkit-box-shadow: 0 1px 1px 0 rgba(31, 35, 46, 0.15);
            box-shadow: 0 1px 1px 0 rgba(31, 35, 46, 0.15);
  }
  .sidebar footer {
    margin-bottom: 10px;
  }
  .about {
    text-align: center;
    max-width: 480px;
    margin: 10px auto auto;
  }
  .about img {
    width: 100px;
    height: 100px;
    -webkit-border-radius: 100%;
            border-radius: 100%;
    margin-bottom: 10px;
  }
  .content-box {
    padding: 20px 10px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
  }
  .contact-title, .copyright {
    display: none;
  }
}

/* Extra Small Devices, Phones */
@media only screen and (max-width: 480px) {
  .content-box {
    padding: 10px;
  }
  .post {
    width: 98%;
    max-width: 100%;
    margin: 2%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .post .post-thumbnail {
    width: 100%;
  }
  .post .post-content {
    width: 100%;
  }
  .post .post-content .post-title {
    margin: 0 0 5px;
  }
  .post .post-content .post-title a {
    font-size: 21px;
  }
}

How to modify the syntax highlighting in this Jekyll template (flexible-jekyll)

What I've done so far:

My problem:

What I tried so far:

1 Answers1