136 lines
5.0 KiB
HTML
136 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title></title>
|
|
<style type="text/css">
|
|
*{
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
#editor, #preview{
|
|
/*width: 49%;*/
|
|
/*height: 400px;*/
|
|
}
|
|
|
|
#editor {
|
|
margin: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 50%;
|
|
}
|
|
|
|
#preview{
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 50%;
|
|
right: 0;
|
|
width: 50%;
|
|
height: 100vh;
|
|
border: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<pre id="editor">
|
|
author: Christian Genco
|
|
instructor: Professor Elisa Farrell
|
|
course: ENGL 1341
|
|
date: 6 April 2015
|
|
title: On MarkdownToMLA.com and the Human Condition
|
|
|
|
Hi! Welcome to MarkdownToMLA.com - a simple website with an even simpler purpose: making it less annoying to generate MLA-formatted documents and essays for school (or work, if you... write essays for work? Maybe you're an english teacher? I'm actually not sure if anyone actually uses MLA in the real world).
|
|
|
|
The stuff on the left is editable, and automatically generates the PDF on the right, which can be downloaded and emailed to your teacher, or printed out, or whatever else you want to do with a PDF. Everything you write is automatically saved as soon as you pause typing, but it's still a good idea to copy and paste it somewhere else every once in a while as a backup. You can even use this website without being connected to the internet!
|
|
|
|
The special format on the left is called Markdown. You can easily make things *italic* and **bold**, as well as quote important people:
|
|
|
|
> Writing MLA-formatted essays is much easier with markdowntomla.com. I use it all the time when I write essays to foreign dictators, as well as to my wife when I need her to pick up something from the store on the way home (we're a very formal family). (Obama)
|
|
|
|
Some teachers don't like you to use subheadings in a paper, but here's the standard way of doing that:
|
|
|
|
# Heading 1
|
|
|
|
## Heading 2
|
|
|
|
### Heading 3
|
|
|
|
#### Heading 4
|
|
|
|
##### Heading 5
|
|
|
|
Need a page break? Just type three dashes on an empty line.
|
|
|
|
---
|
|
|
|
Whoa, so much more room on this page. There's two things left to cover: the special **author**, **instructor**, **course**, **date**, and **title** section at the top; and the work's cited page. The former is used for the MLA heading, numbering the pages, and naming your downloaded PDF. The later is pretty self explanatory (look at the markdown source code at the bottom of this essay).
|
|
|
|
For help generating those citations, check out easybib.com, bibme.org, and citationmachine.net. Be careful citing Wikipedia, but there's also a handy "cite this page" button on every page.
|
|
|
|
If you have any suggestions or feedback for how this can be improved, send me a tweet @cgenco or contact me through my website at http://christian.gen.co (I also have a talk on there about how to go to college for free). Have fun writing essays :D
|
|
|
|
---
|
|
|
|
# Works Cited
|
|
|
|
Egan, Greg. *Permutation City*. New York: HarperPrism, 1994. Print.
|
|
|
|
Rowling, J. K., and Mary GrandPre. *Harry Potter and the Chamber of Secrets*. New York: Arthur A. Levine, 1999. Print.
|
|
|
|
Wikipedia contributors. "Hacker News." Wikipedia, The Free Encyclopedia. Wikipedia, The Free Encyclopedia, 18 Mar. 2015. Web. 7 Apr. 2015.
|
|
</pre>
|
|
<iframe id="preview"></iframe>
|
|
|
|
<script type="text/javascript" src="./js/markdowntomla.js"></script>
|
|
<script type="text/javascript" src="./js/coffeescript.js"></script>
|
|
<script type="text/javascript" src="./js/ace.js"></script>
|
|
<script type="text/javascript" src="./js/ace.mode-markdown.js"></script>
|
|
<script type="text/javascript" src="./js/ace.theme-textmate.js"></script>
|
|
<!-- <script type="text/javascript" src="./js/jspdf.js"></script> -->
|
|
<!-- <script type="text/javascript" src="./js/Deflate/adler32cs.js"></script> -->
|
|
<!-- <script type="text/javascript" src="./js/FileSaver.js/FileSaver.js"></script> -->
|
|
<!-- <script type="text/javascript" src="./js/Blob.js/BlobBuilder.js"></script> -->
|
|
<script type="text/coffeescript">
|
|
console.log "coffeescript works!"
|
|
|
|
window.editor = ace.edit("editor")
|
|
editor.setTheme("ace/theme/textmate")
|
|
editor.getSession().setMode("ace/mode/markdown")
|
|
editor.getSession().setUseWrapMode(true)
|
|
editor.renderer.setShowPrintMargin(false)
|
|
|
|
# do we have anything saved?
|
|
if essay = localStorage?.getItem('essay')
|
|
editor.getSession().setValue(essay)
|
|
|
|
refreshTimer = null
|
|
editor.getSession().on 'change', ->
|
|
clearTimeout(refreshTimer)
|
|
refreshTimer = setTimeout(->
|
|
refresh()
|
|
localStorage?.setItem('essay', editor.getSession().getValue())
|
|
, 1000)
|
|
|
|
window.refresh = ->
|
|
stream = blobStream()
|
|
content = editor.getSession().getValue()
|
|
content = extractMetadata(content)
|
|
body = content.body
|
|
metadata = content.metadata
|
|
createMLADocument(body, metadata, stream)
|
|
stream.on 'finish', ->
|
|
# get a blob you can do whatever you like with
|
|
# blob = stream.toBlob('application/pdf')
|
|
|
|
# or get a blob URL for display in the browser
|
|
url = stream.toBlobURL('application/pdf')
|
|
console.log url
|
|
document.getElementById('preview').src = url
|
|
|
|
refresh()
|
|
</script>
|
|
</body>
|
|
</html> |