Skip to content

Instantly share code, notes, and snippets.

@yuis-ice
Created March 27, 2022 08:11
Show Gist options
  • Save yuis-ice/f121a0a6df3780b512a14583bd88f84c to your computer and use it in GitHub Desktop.
Save yuis-ice/f121a0a6df3780b512a14583bd88f84c to your computer and use it in GitHub Desktop.
Prism.js example
<div class="title"> Prism.js example </div>
<p class="text"> Javascript: </p>
<pre class="language-js">
<code class="language-js">
function example(a, b) {
console.log("example!);
}
</code>
</pre>
<p class="text"> CSS: </p>
<pre class="language-css">
<code class="language-css">
.example {
color: #fff;
}
</code>
</pre>
<p class="text"> HTML: </p>
<pre class="language-markup">
<code class="language-markup">
&#60;p&#62; Example &#60;/p&#62;
&#60;div&#62; Example two &#60;/div&#62;
</code>
</pre>
let js = document.getElementsByClassName("language-js")[0]
js.style.borderRadius = "20px";
js.style.marginLeft = "100px";
js.style.width = "300px";
let css = document.getElementsByClassName("language-css")[0]
css.style.borderRadius = "20px";
css.style.marginLeft = "100px";
css.style.width = "300px";
let html = document.getElementsByClassName("language-markup")[0]
html.style.borderRadius = "20px";
html.style.marginLeft = "100px";
html.style.width = "300px";
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.min.js"></script>
body {
background: #515151;
overflow: hidden;
}
.title {
color: #eee;
font-size: 40px;
font-family: 'Lato', 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Sans-Serif;
padding: 20px 20px 0px 20px;
}
.text {
color: #e0e0e0;
font-size: 20px;
font-family: 'Lato', 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Sans-Serif;
margin-left: 70px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment