Created dynamic webpage

7 years ago · 02ae0d0aa1
6 changed files with 469 additions and 0 deletions
--- a/default.min.css
+++ b/default.min.css
@ -0,0 +1 @@
+.hljs{overflow-x:auto}.hljs,.hljs-subst{}.hljs-comment{color:#888888}.hljs-keyword,.hljs-attribute,.hljs-selector-tag,.hljs-meta-keyword,.hljs-doctag,.hljs-name{font-weight:bold;color:#3182bd}.hljs-type,.hljs-string,.hljs-number,.hljs-selector-id,.hljs-selector-class,.hljs-quote,.hljs-template-tag,.hljs-deletion{color:#880000}.hljs-title,.hljs-section{color:#880000;font-weight:bold}.hljs-regexp,.hljs-symbol,.hljs-variable,.hljs-template-variable,.hljs-link,.hljs-selector-attr,.hljs-selector-pseudo{color:#BC6060}.hljs-literal{color:#78A960}.hljs-built_in,.hljs-bullet,.hljs-code,.hljs-addition{color:#397300}.hljs-meta{color:#1f7199}.hljs-meta-string{color:#4d99bf}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}
--- a/highlight.min.js
+++ b/highlight.min.js
--- a/index.html
+++ b/index.html
@ -0,0 +1,183 @@
+
+<!DOCTYPE html>
+<html class="ocks-org do-not-copy">
+<head>
+<meta charset="utf-8">
+<title>Comprehensive Python Cheatsheet</title>
+
+
+<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
+<!-- <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=python&amp;skin=desert&amp;autorun=false"></script> -->
+<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+
+<!-- <link rel="stylesheet" -->
+      <!-- href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"> -->
+<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script> -->
+
+</head>
+<style>
+
+@import url(style.css);
+
+.join,
+.link,
+.node rect {
+  fill: none;
+  stroke: #636363;
+  stroke-width: 1.5px;
+}
+
+.link {
+  stroke: #969696;
+}
+
+.node rect {
+  fill: white;
+}
+
+.link path,
+.node rect,
+.node text,
+.join {
+  -webkit-transition: stroke-opacity 500ms linear, fill-opacity 500ms linear;
+  -moz-transition: stroke-opacity 500ms linear, fill-opacity 500ms linear;
+  -ms-transition: stroke-opacity 500ms linear, fill-opacity 500ms linear;
+  -o-transition: stroke-opacity 500ms linear, fill-opacity 500ms linear;
+  transition: stroke-opacity 500ms linear, fill-opacity 500ms linear;
+}
+
+.node .element rect {
+  fill: #bdbdbd;
+  stroke: none;
+}
+
+.node .null rect {
+  fill: none;
+  stroke: none;
+}
+
+.node .null text {
+  fill: #636363;
+}
+
+.node .selection rect {
+  stroke: #e6550d;
+}
+
+.node .data rect {
+  stroke: #3182bd;
+}
+
+.node .datum rect {
+  fill: #d9d9d9;
+  stroke: none;
+}
+
+.node .code text {
+  font-family: monospace;
+}
+
+.node .key rect {
+  fill: #a1d99b;
+  stroke: none;
+}
+
+.link .to-key,
+.join {
+  stroke: #a1d99b;
+}
+
+.join {
+  stroke-dasharray: 2,2;
+}
+
+.link .to-null {
+  stroke-dasharray: .5,3.5;
+  stroke-linecap: round;
+}
+
+.link .from-data {
+  stroke: #3182bd;
+}
+
+.play circle {
+  fill: #fff;
+  stroke: #000;
+  stroke-width: 3px;
+}
+
+.play:hover path {
+  fill: #f00;
+}
+
+.play.mousedown circle {
+  fill: #f00;
+}
+
+.play.mousedown path {
+  fill: #fff;
+}
+
+.play rect {
+  fill: none;
+  pointer-events: all;
+  cursor: pointer;
+}
+
+code span {
+  -webkit-transition: background 250ms linear;
+  -moz-transition: background 250ms linear;
+  -ms-transition: background 250ms linear;
+  -o-transition: background 250ms linear;
+  transition: background 250ms linear;
+}
+
+pre.prettyprint, code.prettyprint {
+  background-color: #222;
+  border-radius: 8px;
+  font-size: 15px;
+}
+
+pre.prettyprint {
+  width: 90%;
+  margin: 0.5em;
+  padding: 1em;
+  white-space: pre-wrap;
+}
+</style>
+
+<body>
+
+<header>
+  <aside>March 14, 2018</aside>
+  <a href="../" rel="author">Jure Šorn</a>
+</header>
+
+<div id=bla></div>
+
+<footer>
+  <aside>March 14, 2018</aside>
+  <a href="../" rel="author">Jure Šorn</a>
+</footer>
+
+<br>
+<br>
+<br>
+
+<!-- <script src="https://d3js.org/topojson.v1.min.js"></script> -->
+
+<script src="showdown.min.js"></script>
+<!-- <script src="https://cdn.rawgit.com/showdownjs/showdown/1.0.1/dist/showdown.min.js"></script> -->
+<!-- <script src="showdown-prettify.min.js"></script> -->
+<!-- <script src="https://raw.githubusercontent.com/showdownjs/prettify-extension/master/dist/showdown-prettify.min.js"></script> -->
+
+<!-- <script src="highlight.min.js"></script> -->
+
+<link rel="stylesheet" href="default.min.css">
+<script src="highlight.min.js"></script>
+
+<script src="script.js"></script>
+<!-- <script async="" src="highlight.min.js"></script> -->
+
+</body>
+</html>
--- a/script.js
+++ b/script.js
@ -0,0 +1,58 @@
+$(document).ready(function() {
+  parseMd()
+});
+
+// parseMd()
+
+function parseMd() {
+  var GITHUB = 'https://raw.githubusercontent.com/gto76/python-cheatsheet/master/README.md'
+  var RAWGIT = "https://rawgit.com/gto76/python-cheatsheet/master/README.md"
+  jQuery.get(GITHUB, function(text) {
+    var converter = new showdown.Converter()
+    // text = '#hello, markdown!'
+    // var converter = new showdown.Converter({extensions: ['prettify']})
+    html = converter.makeHtml(text)
+    aDiv = $('#bla')
+    nodes = $.parseHTML(html)
+    aDiv.after(nodes);
+    // PR.prettyPrint()
+    insertLinks()
+    // $("code").removeClass("xml")
+    // $.getScript("https://bost.ocks.org/mike/highlight.min.js")
+    // hljs.configure({
+      // languages: ['python']
+    // })
+    // hljs.initHighlighting();
+
+    // d3.selectAll("code:not([class])").classed("javascript", 1);
+
+    // d3.selectAll("code").classed("javascript", 1);
+
+    d3.selectAll("code").each(function() { hljs.highlightBlock(this); });
+
+  });
+}
+
+// function parseMd() {
+//   var GITHUB = 'https://raw.githubusercontent.com/gto76/python-cheatsheet/master/README.md'
+//   var RAWGIT = "https://rawgit.com/gto76/python-cheatsheet/master/README.md"
+//   jQuery.get(GITHUB, function(text) {
+//     var converter = new showdown.Converter({extensions: ['prettify']})
+//     // text = '#hello, markdown!'
+//     html = converter.makeHtml(text)
+//     aDiv = $('#bla')
+//     nodes = $.parseHTML(html)
+//     aDiv.after(nodes);
+//     PR.prettyPrint()
+//     insertLinks()
+//   });
+// }
+
+function insertLinks() {
+  $('h2').each(function() {
+    // title = $(this).text()
+    aId = $(this).attr('id')
+    // titleNoSpace = title.replace(" ", "-");
+    $(this).append('<a href="#'+aId+'" name="'+aId+'">#</a>')
+  })
+}
--- a/showdown.min.js
+++ b/showdown.min.js
--- a/style.css
+++ b/style.css
@ -0,0 +1,221 @@
+
+/* Copyright 2013 Michael Bostock. All rights reserved. Do not copy. */
+
+@import url(//fonts.googleapis.com/css?family=PT+Serif|PT+Serif:b|PT+Serif:i|PT+Sans|PT+Sans:b);
+
+html {
+  min-width: 1040px;
+}
+
+.ocks-org body {
+  background: #fcfcfa;
+  color: #333;
+  font-family: "PT Serif", serif;
+  margin: 1em auto 4em auto;
+  position: relative;
+  width: 960px;
+}
+
+.ocks-org header,
+.ocks-org footer,
+.ocks-org aside,
+.ocks-org h1,
+.ocks-org h2,
+.ocks-org h3,
+.ocks-org h4 {
+  font-family: "PT Sans", sans-serif;
+}
+
+.ocks-org h1,
+.ocks-org h2,
+.ocks-org h3,
+.ocks-org h4 {
+  color: #000;
+}
+
+.ocks-org header,
+.ocks-org footer {
+  color: #636363;
+}
+
+h1 {
+  font-size: 64px;
+  font-weight: 300;
+  letter-spacing: -2px;
+  margin: .3em 0 .1em 0;
+}
+
+h2 {
+  margin-top: 2em;
+}
+
+h1, h2 {
+  text-rendering: optimizeLegibility;
+}
+
+h2 a[name],
+h2 a[id] {
+  color: #ccc;
+  right: 100%;
+  padding: 0 .3em;
+  position: absolute;
+}
+
+header,
+footer {
+  font-size: small;
+}
+
+.ocks-org header aside,
+.ocks-org footer aside {
+  float: left;
+  margin-right: .5em;
+}
+
+.ocks-org header aside:after,
+.ocks-org footer aside:after {
+  padding-left: .5em;
+  content: "/";
+}
+
+footer {
+  margin-top: 8em;
+}
+
+h1 ~ aside {
+  font-size: small;
+  right: 0;
+  position: absolute;
+  width: 180px;
+}
+
+.attribution {
+  font-size: small;
+  margin-bottom: 2em;
+}
+
+body > p, li > p {
+  line-height: 1.5em;
+}
+
+body > p {
+  width: 720px;
+}
+
+body > blockquote {
+  width: 640px;
+}
+
+blockquote q {
+  display: block;
+  font-style: oblique;
+}
+
+ul {
+  padding: 0;
+}
+
+li {
+  width: 690px;
+  margin-left: 30px;
+}
+
+a {
+  color: steelblue;
+}
+
+a:not(:hover) {
+  text-decoration: none;
+}
+
+pre, code, textarea {
+  font-family: "Menlo", monospace;
+}
+
+code {
+  line-height: 1em;
+}
+
+textarea {
+  font-size: 100%;
+}
+
+body > pre {
+  border-left: solid 2px #ccc;
+  padding-left: 18px;
+  margin: 2em 0 2em -20px;
+}
+
+.html .value,
+.javascript .string,
+.javascript .regexp {
+  color: #756bb1;
+}
+
+.html .tag,
+.css .tag,
+.javascript .keyword {
+  color: #3182bd;
+}
+
+.comment {
+  color: #636363;
+}
+
+.html .doctype,
+.javascript .number {
+  color: #31a354;
+}
+
+.html .attribute,
+.css .attribute,
+.javascript .class,
+.javascript .special {
+  color: #e6550d;
+}
+
+.album_cover {
+  width: 179px;
+  height: 179px;
+  border: 0px;
+  margin: 0px;
+}
+
+.single_cover {
+  width: 143px;
+  height: 143px;
+  border: 0px;
+  margin: 0px;
+}
+
+svg {
+  font: 10px sans-serif;
+}
+
+.axis path, .axis line {
+  fill: none;
+  stroke: #000;
+  shape-rendering: crispEdges;
+}
+
+sup, sub {
+  line-height: 0;
+}
+
+q:before {
+  content: "â€œ";
+}
+
+q:after {
+  content: "â€";
+}
+
+blockquote q {
+  line-height: 1.5em;
+  display: inline;
+}
+
+blockquote q:before,
+blockquote q:after {
+  content: "";
+}