Skip to content

Instantly share code, notes, and snippets.

@awunnenb

awunnenb/index.html

Last active March 10, 2021 10:52
Show Gist options
  • Save awunnenb/bd55f26600f244876fccddf6e7568d77 to your computer and use it in GitHub Desktop.
Save awunnenb/bd55f26600f244876fccddf6e7568d77 to your computer and use it in GitHub Desktop.
Download ZIP
markdown to html converter
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css" />
<title>Markdown Converter</title>
<style>
textarea {
margin-bottom: 5px;
width: 100%;
height: 15vh;
}
</style>
</head>
<body>
<div class="container">
<h3>Markdown Converter</h3>
<textarea id="inputTextarea">### Markdown -> HTML Converter</textarea>
<button id="buttonPreview" class="button-primary">Preview</button>
<button id="buttonClear">Clear</button>
<button id="buttonCopyMarkdown">Copy Markdown to Clipboard</button>
<textarea id="outputTextarea"></textarea>
<button id="buttonCopyHTML">Copy HTML to Clipboard</button>
<div id="preview"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/showdown@1.9.0/dist/showdown.min.js"></script>
<script>
var output = '';
inputTextarea = document.querySelector('#inputTextarea');
outputTextarea = document.querySelector('#outputTextarea');
buttonClear = document.querySelector('#buttonClear');
buttonCopyHTML = document.querySelector('#buttonCopyHTML');
buttonCopyMarkdown = document.querySelector('#buttonCopyMarkdown');
buttonPreview = document.querySelector('#buttonPreview');
buttonPreview.addEventListener('click', function () {
const converter = new showdown.Converter(),
preview = document.getElementById('preview');
showdown.setFlavor('github');
if (preview && inputTextarea.value) {
output = converter.makeHtml(inputTextarea.value);
outputTextarea.value = output;
preview.innerHTML = output;
} else {
preview.innerHTML = "Markdown im Textfeld eingeben und Preview drücken!"
}
});
buttonClear.addEventListener('click', function () {
inputTextarea.value = "";
inputTextarea.select();
outputTextarea.value = "";
preview.innerHTML = "Markdown im Textfeld eingeben und Preview drücken!";
});
buttonCopyHTML.addEventListener('click', function () {
outputTextarea.select();
document.execCommand("Copy");
});
buttonCopyMarkdown.addEventListener('click', function () {
inputTextarea.select();
document.execCommand("Copy");
});
buttonPreview.click();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment