Browse Source

fixed some syntax highlighting and scrolling

master
jose marin 3 years ago
parent
commit
a225a1d7af
12 changed files with 96 additions and 39 deletions
  1. +0
    -1
      assets/markdown.svg
  2. +8
    -16
      index.html
  3. +66
    -2
      javascript/main.js
  4. +0
    -0
      lib/highlight.min.js
  5. +0
    -0
      lib/marked.min.js
  6. +0
    -0
      styles/codemirror.min.css
  7. +0
    -1
      styles/dracula.css
  8. +22
    -6
      styles/main.css
  9. +0
    -1
      styles/qtcreator_dark.css
  10. +0
    -11
      styles/semantic.min.css
  11. +0
    -0
      styles/the-matrix.css
  12. +0
    -1
      styles/xt256.css

+ 0
- 1
assets/markdown.svg View File

@ -1 +0,0 @@
<?xml version="1.0" ?><svg height="1024" width="1024" xmlns="http://www.w3.org/2000/svg"><path d="M950.154 192H73.846C33.127 192 0 225.12699999999995 0 265.846v492.308C0 798.875 33.127 832 73.846 832h876.308c40.721 0 73.846-33.125 73.846-73.846V265.846C1024 225.12699999999995 990.875 192 950.154 192zM576 703.875L448 704V512l-96 123.077L256 512v192H128V320h128l96 128 96-128 128-0.125V703.875zM767.091 735.875L608 512h96V320h128v192h96L767.091 735.875z"/></svg>

+ 8
- 16
index.html View File

@ -5,12 +5,12 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vim.md</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
<link rel="stylesheet" href="styles/bulma.min.css">
<link rel="stylesheet" href="styles/ir-black.css">
<link rel="stylesheet" href="lib/codemirror.min.css">
<link rel="stylesheet" href="lib/the-matrix.css">
<link rel="stylesheet" href="styles/codemirror.min.css">
<link rel="stylesheet" href="styles/the-matrix.css">
<link rel="stylesheet" href="styles/dialog.css">
<link rel="stylesheet" href="styles/ir-black.css">
<link rel="stylesheet" href="styles/main.css">
</head>
<body id="book" class="has-navbar-fixed-top">
@ -26,21 +26,13 @@
<div class="navbar-item">
<div class="field is-grouped">
<p class="control js-copy">
<a class="button is-black">
<a class="button is-success">
<span class="icon">
<i class="fas fa-copy"></i>
</span>
<span>Copy</span>
</a>
</p>
<p class="control js-export">
<a class="button is-success">
<span class="icon">
<i class="fas fa-share-square"></i>
</span>
<span>Export</span>
</a>
</p>
</div>
</div>
</div>
@ -52,13 +44,13 @@
</div>
<div class="book-col--60">
<div class="book-content">
<div class="main-content js-content" style="padding-bottom: 100px;"></div>
<div class="main-content js-content"></div>
</div>
</div>
</div>
</div>
<script src="javascript/highlight.min.js"></script>
<script src="javascript/marked.min.js"></script>
<script src="lib/highlight.min.js"></script>
<script src="lib/marked.min.js"></script>
<script src="lib/codemirror.min.js"></script>
<script src="lib/vim.min.js"></script>
<script src="javascript/searchcursor.js"></script>


+ 66
- 2
javascript/main.js View File

@ -1,7 +1,71 @@
(function() {
const md = `
# Hello, World.
------
First off *why* did I build this when their are so many other markdown editors out there?...
__Vim__ ftw that's why! And no other markdown editors out there have my must have vim keymapping \`imap kj <Esc>\`
now without further ado
Here is a list of the stuff you can do in markdown.
## First the easy stuff
* Lists!
* in bullet
* form
### Also...
1. numbered lists!
2. in numerical
3. form
#### And then there was this
1. Numerical bullets
* with sub bullets
##### link all the things
[Links!](http://www.google.com) Links to all sorts of stuff
###### And finally
![Friendly, non-threatening image of a brown bear](https://media.giphy.com/media/c9ndlj2AUhaqk/giphy.gif)
But also don't forget...
\`\`\`\javascript
(function() {
return Math.floor(Math.random() * 100);
})();
\`\`\`\
Also this
\`\`\`html
<!doctype html>
<html lang="en-us">
<head>
<title>My Website</title>
</head>
<body></body>
</html>
\`\`\`
And one of my personal favorites __tables__
Simple | Markdown | Table
--- | --- | ---
*looks* | \`pretty\` | **good**
1 | 2 | 3
And so on so forth.
Happy writing in **VIM** mwahahaha!
`;
if (!window.localStorage.getItem('markdown') || !window.localStorage.getItem('markdown').replace(/\s/g, '')) {
window.localStorage.setItem('markdown', '# Your markdown _here_')
window.localStorage.setItem('markdown', md)
}
const editor = CodeMirror(document.querySelector('.js-input'), {
@ -35,7 +99,7 @@
document.querySelector('.CodeMirror-vscrollbar').addEventListener('scroll', event => {
setTimeout(() => {
if ( document.querySelector('.js-content').parentElement.parentElement.scrollHeight - editor.getScrollInfo().top <= 700 ) {
if ( document.querySelector('.js-content').parentElement.parentElement.scrollHeight - editor.getScrollInfo().top <= 1000 ) {
document.querySelector('.js-content').parentElement.parentElement.scrollTop = 1000000;
}
else {


javascript/highlight.min.js → lib/highlight.min.js View File


javascript/marked.min.js → lib/marked.min.js View File


lib/codemirror.min.css → styles/codemirror.min.css View File


+ 0
- 1
styles/dracula.css View File

@ -1 +0,0 @@
.hljs{display:block;overflow-x:auto;padding:0.5em;background:#282a36}.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-section,.hljs-link{color:#8be9fd}.hljs-function .hljs-keyword{color:#ff79c6}.hljs,.hljs-subst{color:#f8f8f2}.hljs-string,.hljs-title,.hljs-name,.hljs-type,.hljs-attribute,.hljs-symbol,.hljs-bullet,.hljs-addition,.hljs-variable,.hljs-template-tag,.hljs-template-variable{color:#f1fa8c}.hljs-comment,.hljs-quote,.hljs-deletion,.hljs-meta{color:#6272a4}.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-title,.hljs-section,.hljs-doctag,.hljs-type,.hljs-name,.hljs-strong{font-weight:bold}.hljs-emphasis{font-style:italic}

+ 22
- 6
styles/main.css View File

@ -21,6 +21,10 @@ table th {
text-align: center;
}
hr {
background-color: #000;
}
#book {
position: fixed;
}
@ -132,7 +136,23 @@ table th {
}
#book .main-content p {
margin-bottom: 1em;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
#book p > code {
display: inline;
color: red;
padding: .25em .5em .25em;
background-color: rgba(27,31,35,0.05);
}
#book p > code > .hljs-tag {
color: red;
}
#book p > code > .hljs-tag .hljs-name {
color: red;
}
#book .main-content blockquote {
@ -154,7 +174,6 @@ table th {
max-width: 1024px;
margin-left: auto;
margin-right: auto;
}
#book .CodeMirror {
@ -165,9 +184,6 @@ table th {
width: 10px;
}
#book hr {
background-color: #000;
}
#book .navbar {
border-bottom: 1px solid #ccc;
@ -178,7 +194,7 @@ table th {
}
#book table code {
color: black;
color: red;
padding: 0.2em 0.4em;
margin: 0;
font-size: 85%;


+ 0
- 1
styles/qtcreator_dark.css View File

@ -1 +0,0 @@
.hljs{display:block;overflow-x:auto;padding:0.5em;background:#000000}.hljs,.hljs-subst,.hljs-tag,.hljs-title{color:#aaaaaa}.hljs-strong,.hljs-emphasis{color:#a8a8a2}.hljs-bullet,.hljs-quote,.hljs-number,.hljs-regexp,.hljs-literal{color:#ff55ff}.hljs-code .hljs-selector-class{color:#aaaaff}.hljs-emphasis,.hljs-stronge,.hljs-type{font-style:italic}.hljs-keyword,.hljs-selector-tag,.hljs-function,.hljs-section,.hljs-symbol,.hljs-name{color:#ffff55}.hljs-attribute{color:#ff5555}.hljs-variable,.hljs-params,.hljs-class .hljs-title{color:#8888ff}.hljs-string,.hljs-selector-id,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-type,.hljs-built_in,.hljs-builtin-name,.hljs-template-tag,.hljs-template-variable,.hljs-addition,.hljs-link{color:#ff55ff}.hljs-comment,.hljs-meta,.hljs-deletion{color:#55ffff}

+ 0
- 11
styles/semantic.min.css
File diff suppressed because it is too large
View File


lib/the-matrix.css → styles/the-matrix.css View File


+ 0
- 1
styles/xt256.css View File

@ -1 +0,0 @@
.hljs{display:block;overflow-x:auto;color:#eaeaea;background:#000;padding:0.5}.hljs-subst{color:#eaeaea}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}.hljs-builtin-name,.hljs-type{color:#eaeaea}.hljs-params{color:#da0000}.hljs-literal,.hljs-number,.hljs-name{color:#ff0000;font-weight:bolder}.hljs-comment{color:#969896}.hljs-selector-id,.hljs-quote{color:#00ffff}.hljs-template-variable,.hljs-variable,.hljs-title{color:#00ffff;font-weight:bold}.hljs-selector-class,.hljs-keyword,.hljs-symbol{color:#fff000}.hljs-string,.hljs-bullet{color:#00ff00}.hljs-tag,.hljs-section{color:#000fff}.hljs-selector-tag{color:#000fff;font-weight:bold}.hljs-attribute,.hljs-built_in,.hljs-regexp,.hljs-link{color:#ff00ff}.hljs-meta{color:#fff;font-weight:bolder}

Loading…
Cancel
Save