add markdown-previewer

This commit is contained in:
Trent Palmer 2020-04-05 04:46:13 -07:00
parent 5147ed98e8
commit 15c1baf09a
6 changed files with 282 additions and 60 deletions

View File

@ -1,63 +1,47 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta <meta name="generator" content="HTML Tidy for HTML5 for Linux version 5.6.0">
name="generator" <meta charset="utf-8">
content="HTML Tidy for HTML5 for Linux version 5.6.0" <meta name="viewport" content="width=device-width, initial-scale=1">
/> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity=
<meta charset="utf-8" /> "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" type="text/css" href="fcc_challenges.css">
<link <title>FCC Challenges</title>
rel="stylesheet" </head>
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" <body>
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" <h1 id="title">FCC Challenges</h1>
crossorigin="anonymous" <div id="directory-list">
/> <ul>
<link rel="stylesheet" type="text/css" href="fcc_challenges.css" /> <li>
<title>FCC Challenges</title> <a href="https://github.com/TrentSPalmer/fcc-challenges" target="_blank">GitHub Repository View of This
</head> Page</a>
<body> </li>
<h1 id="title">FCC Challenges</h1> <li>
<div id="directory-list"> <a href="mccain-tribute/" target="_blank">Build a Tribute Page - McCain Tribute - Responsive Web Design
<ul> Projects</a>
<li> </li>
<a <li>
href="https://github.com/TrentSPalmer/fcc-challenges" <a href="how-was-dinner/" target="_blank">Build a Survey Form - How Was Dinner? - Responsive Web Design
target="_blank" Projects</a>
>GitHub Repository View of This Page</a </li>
> <li>
</li> <a href="tools-that-love-you/" target="_blank">Build a Product Landing Page - Tools That Love You - Responsive
<li> Web Design Projects</a>
<a href="mccain-tribute/" target="_blank" </li>
>Build a Tribute Page - McCain Tribute - Responsive Web Design <li>
Projects</a <a href="lmde-3-disk-encryption/" target="_blank">Build a Technical Documentation Page - LMDE 3 Disk Encryption
> - Responsive Web Design Projects</a>
</li> </li>
<li> <li>
<a href="how-was-dinner/" target="_blank" <a href="random-quote-machine/build" target="_blank">Random Quote Machine - Build a Random Quote Machine -
>Build a Survey Form - How Was Dinner? - Responsive Web Design Front End Libraries Projects</a>
Projects</a </li>
> <li>
</li> <a href="markdown-previewer" target="_blank">Markdown Previewer - Build a Markdown Previewer -
<li> Front End Libraries Projects</a>
<a href="tools-that-love-you/" target="_blank" </li>
>Build a Product Landing Page - Tools That Love You - Responsive Web </ul>
Design Projects</a </div>
> </body>
</li>
<li>
<a href="lmde-3-disk-encryption/" target="_blank"
>Build a Technical Documentation Page - LMDE 3 Disk Encryption -
Responsive Web Design Projects</a
>
</li>
<li>
<a href="random-quote-machine/build" target="_blank"
>Random Quote Machine - Build a Random Quote Machine - Front End
Libraries Projects</a
>
</li>
</ul>
</div>
</body>
</html> </html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 818 KiB

View File

@ -0,0 +1,49 @@
let defaultText = "# Markdown Editor";
defaultText += "\n---";
defaultText += "\n---";
defaultText += "\n## Markdown Features Below";
defaultText += "\n* [What is Markdown?](#what-is-markdown)";
defaultText += "\n* [Quote Blocks](#quote-blocks)";
defaultText += "\n* [This Is An H2 Header](#this-is-an-h2-header)";
defaultText += "\n* [Line Breaks](#line-breaks)";
defaultText += "\n* [Inline Code](#inline-code)";
defaultText += "\n* [Code Block](#code-block)";
defaultText += "\n* [Photo of Jupiter](#photo-of-jupiter)";
defaultText += "\n";
defaultText += "\n---";
defaultText += "\n## What is Markdown? ";
defaultText += "\n You could read the [wikipedia page for markdown](https://en.wikipedia.org/wiki/Markdown)";
defaultText += "\n";
defaultText += "\n---";
defaultText += "\n## Quote Blocks ";
defaultText += "\nYou will find the following quote from the link above.";
defaultText += "\n> Markdown is a lightweight markup language with plain-text-formatting syntax. Markdown is a lightweight markup language with plain-text-formatting syntax.";
defaultText += "\n";
defaultText += "\n---";
defaultText += "\n## This Is An H2 Header ";
defaultText += "\n The **editor** on the left (or above if in portrait orientation) is an input field; ***you can type in it***";
defaultText += "\n";
defaultText += "\n---";
defaultText += "\n## Line Breaks";
defaultText += "\nUse a double space at the end of a line ";
defaultText += "\nto add a line break.";
defaultText += "\n";
defaultText += "\n---";
defaultText += "\n## Inline Code";
defaultText += "\nThis is an example of inline code: ";
defaultText += "\nType `apt-get update && apt-get dist-upgrade` to update Debian or Ubuntu";
defaultText += "\n";
defaultText += "\n---";
defaultText += "\n## Code Block";
defaultText += "\nThis is an example of a (python) code block:";
defaultText += "\n```python";
defaultText += "\ndef addTogether(x,y):";
defaultText += "\n return x + y";
defaultText += "\n# should print 8";
defaultText += "\nprint(addTogether(5,3))";
defaultText += "\n```";
defaultText += "\n";
defaultText += "\n---";
defaultText += "\n## Photo of Jupiter";
defaultText += "\n";
defaultText += "![Jupiter](PIA23595_hires.jpg)";

View File

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="#" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity=
"sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="markdownPreviewer.css">
<title>Markdown Previewer - Build a Markdown Previewer - Front End Libraries Projects</title>
</head>
<body>
<header id="buttonHeader">
<button id="eraseButton" class="btn">Erase Editor</button>
<button id="reloadButton" class="btn">Reload Example</button>
</header>
<div id="test">
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</div>
<div id="editorAndPreview">
<div id="textEditor">
<textarea id="editor">
</textarea>
</div>
<div id="preview"></div>
</div>
<script type="text/javascript" src="defaultText.js"></script>
<script type="text/javascript" src="markdownPreviewer.js"></script>
</body>
</html>

View File

@ -0,0 +1,108 @@
body {
display: flex;
flex-direction: column;
background-color: #eee8d5;
color: #073642;
overflow: hidden;
}
#editorAndPreview {
display: flex;
}
#buttonHeader {
height: 3rem;
display: flex;
flex-direction: row;
justify-content: flex-end;
}
#eraseButton {
background-color: #dc322f;
color: #fdf6e3;
}
#reloadButton {
background-color: #268bd2;
color: #fdf6e3;
margin-left: 1rem;
margin-right: 1rem;
}
#editor {
font: monospace;
border: none;
outline: none;
background-color: #073642;
color: #eee8d5;
}
#editor, #preview {
padding: 0px 3rem 0px 3rem;
}
#preview {
overflow: auto;
}
code {
font: monospace;
background-color: LightGrey;
}
blockquote {
background: #f9f9f9;
border-left: 10px solid #ccc;
margin: 1.5em 10px;
padding: 0.5em 10px;
quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
color: #ccc;
content: open-quote;
font-size: 4em;
line-height: 0.1em;
margin-right: 0.25em;
vertical-align: -0.4em;
}
blockquote p {
display: inline;
}
img {
max-width: 100%;
height: auto;
}
@media (orientation: landscape) {
#editorAndPreview {
flex-direction: row;
justify-content: flex-end;
}
#textEditor, #preview {
width: 50vw;
height: 95vh;
}
#editor {
resize: none;
width: 100%;
height: 100%;
}
}
@media (orientation: portrait) {
#buttonHeader {
height: 3rem;
}
#editorAndPreview {
flex-direction: column;
}
#editor {
height: 43vh;
width: 100vw;
}
#preview {
overflow: scroll;
height: 50vh;
}
}

View File

@ -0,0 +1,48 @@
marked.setOptions({
breaks: true,
});
$(document).ready(function() {
/* if there is editorText in sessionStorage, load that into
* the editor, otherwise load the default text into the editor */
if (sessionStorage.hasOwnProperty('editorText')) {
$('#editor').val(sessionStorage.editorText);
} else {
$('#editor').val(defaultText);
};
// render the editor contents to the preview element
$('#preview').html(marked($('#editor').val()));
/* on every input event in the editor, store the editor
* contents in sessionStorage and also render the contents
* of the editor to the preview element */
$('#editor').on('input',function() {
sessionStorage.setItem('editorText',$(this).val());
$('#preview').html(marked($(this).val()));
});
// handle eraseButton
$('#eraseButton').click(function() {
$('#editor').val('');
sessionStorage.setItem('editorText',$('#editor').val());
$('#preview').html(marked($('#editor').val()));
});
// handle reloadButton
$('#reloadButton').click(function() {
$('#editor').val(defaultText);
sessionStorage.setItem('editorText',defaultText);
$('#preview').html(marked(defaultText));
});
$('#editor').on('scroll', scrollSync);
});
const scrollSync = () => {
const editorScrollable = document.getElementById('editor').scrollHeight - $('#editor').height();
const previewScrollable = document.getElementById('preview').scrollHeight - $('#preview').height();
const editorScrollRatio = $('#editor').scrollTop() === 0 ? 0 : $('#editor').scrollTop() / editorScrollable;
const previewScrollPosition = previewScrollable * editorScrollRatio;
$('#preview').scrollTop(previewScrollPosition);
};