Prism tutorial created

beumsk · Aug 14, 2019 · 5f03792 · 5f03792
1 parent 7e44b54
commit 5f03792
Show file tree

Hide file tree

Showing 3 changed files with 242 additions and 0 deletions.
diff --git a/Prism.html b/Prism.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Prism</title>
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+  <link rel="stylesheet" href="css/prism.css">
+</head>
+<body>
+  <div class="container">
+
+    <h1 class="text-center">PRISM</h1>
+
+
+    <article>
+      <h2>HTML</h2>
+
+      <h3>Example</h3>
+      <figure>
+<pre><code class="language-markup"><script type="prism-html-markup"><div>
+  <h1>Prism, it's working !</h1>
+</div></script></code></pre>
+      </figure>
+
+      <h3>Code snippet</h3>
+      <figure>
+<pre><code class="language-markup">&lt;pre>&lt;code class="language-markup">&lt;/code>&lt;/pre></code></pre>
+        <figcaption>Replace less than signs with <kbd>&amp;lt;</kbd> inside the code tags</figcaption>
+      </figure>
+
+      <h3>Code snippet with Javascript</h3>
+      <figure>
+<pre><code class="language-markup">&lt;pre>&lt;code class="language-markup">&lt;script type="prism-html-markup">&lt;/script>&lt;/code>&lt;/pre></code></pre>
+        <figcaption>No need to replace less than signs thanks to Javascript</figcaption>
+      </figure>
+    </article>
+    <hr><br>
+
+
+    <article>
+      <h2>CSS</h2>
+
+      <h3>Example</h3>
+      <figure>
+<pre><code class="language-css">.prism::after {
+  content: "Prism, it's working !";
+}</code></pre>
+      </figure>
+    </article>
+
+      <h3>Code snippet</h3>
+      <figure>
+<pre><code class="language-markup">&lt;pre>&lt;code class="language-css">&lt;/code>&lt;/pre></code></pre>
+      </figure>
+    </article>
+    <hr><br>
+
+
+    <article>
+      <h2>Javascript</h2>
+
+      <h3>Example</h3>
+      <figure>
+<pre><code class="language-javascript">function Prism() {
+  console.log("Prism, it's working !");
+};</code></pre>
+      </figure>
+
+      <h3>Code snippet</h3>
+      <figure>
+<pre><code class="language-markup">&lt;pre>&lt;code class="language-javascript">&lt;/code>&lt;/pre></code></pre>
+      </figure>
+    </article>
+    <hr><br>
+
+  </div>
+  <script src="js/prism.js"></script>
+</body>
+</html>
diff --git a/css/prism.css b/css/prism.css
@@ -0,0 +1,153 @@
+/* PrismJS 1.17.1
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript&plugins=unescaped-markup */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: black;
+	background: none;
+	text-shadow: 0 1px white;
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	font-size: 1em;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+	text-shadow: none;
+	background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+	text-shadow: none;
+	background: #b3d4fc;
+}
+
+@media print {
+	code[class*="language-"],
+	pre[class*="language-"] {
+		text-shadow: none;
+	}
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+	white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: slategray;
+}
+
+.token.punctuation {
+	color: #999;
+}
+
+.namespace {
+	opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+	color: #9a6e3a;
+	background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+	color: #07a;
+}
+
+.token.function,
+.token.class-name {
+	color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+	color: #e90;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+/* Fallback, in case JS does not run, to ensure the code is at least visible */
+[class*='lang-'] script[type='text/plain'],
+[class*='language-'] script[type='text/plain'],
+script[type='text/plain'][class*='lang-'],
+script[type='text/plain'][class*='language-'] {
+	display: block;
+	font: 100% Consolas, Monaco, monospace;
+	white-space: pre;
+	overflow: auto;
+}
+
diff --git a/js/prism.js b/js/prism.js