Customizing GitHub Gists: Custom Frame

In this example below you will see how to do a Customizing GitHub Gists: Custom Frame with some HTML / CSS and Javascript

Customizing the look and feel of a Gist.

This awesome code was written by lonekorean, you can see more from this user in the personal repository.
You can find the original code on
Copyright lonekorean ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>Customizing GitHub Gists: Custom Frame</title>
      <link rel="stylesheet" href="css/style.css">



  <p>This is just filler text, showing what an article might look like. Let's say it's an article about code, with an embedded Gist, like this!</p>

<script src=""></script>



/*Downloaded from */
@import url('|Open+Sans');

body {
  margin: 20px;
  font: 16px 'Open Sans', sans-serif;

body .gist .gist-file {
  margin-bottom: 0;
  border: 1px dashed #adb5bd;
  border-radius: 0;

body .gist .gist-data {
  border-bottom: none;
  border-radius: 0;
  background-color: #f1f3f5;

body .gist .blob-wrapper {
  border-radius: 0;

body .gist .highlight {
  background-color: transparent;
  font-family: 'Droid Sans Mono', monospace;
  font-size: 14px;

body .gist .highlight td {
  padding: 5px 15px !important;
  line-height: 1;
  font-family: inherit;
  font-size: inherit;

body .gist tr:first-child td {
  padding-top: 15px !important;

body .gist tr:last-child td {
  padding-bottom: 15px !important;

body .gist .blob-num {
  color: #ced4da;
  background-color: #495057;
  pointer-events: none;

body .gist .gist-meta {
  display: none;