Markdown LaTeX Text Editor Writing - Download Markdown and LaTeX Compatible Text Editor - Writing.js

Download Markdown and LaTeX Compatible Text Editor – Writing.js

By Posted on

This time I will share jQuery Plugin and tutorial about Markdown and LaTeX Compatible Text Editor – Writing.js, hope it will help you in programming stack.

Markdown LaTeX Text Editor Writing - Download Markdown and LaTeX Compatible Text Editor - Writing.js

File Size: 253 KB
Views Total: 1973
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

Writing is a simple, lightweight online text editor that supports both Markdown and LaTeX syntax. Implemented in jQuery, JavaScript and CSS.

The text editor is designed to be lightweight and, unlike some other similar solutions, fast to display (no delay when writing, no flickering when writing math), as close as possible to the math.stackexchange.com editor.

Commands:

  • CTRL + D: toggle display mode (editor only, preview only or both-at-the-same-time)
  • CTRL + P: print or export as PDF
  • CTRL + S: save source code as .MD file
  • CTRL + SHIFT + L: enable / disable LaTeX (i.e. math formulas)
  • CTRL + SHIFT + R: toggle roman (LaTex-like) or sans-serif font
  • CTRL + SHIFT + H: show this help dialog
  • F11: full-screen (in most browsers)

How to use it:

1. Load JavaScript library and other required resources in the html document.

view source
1 <script src="Markdown.Converter.js"></script>
2 <script src="Markdown.Sanitizer.js"></script>
3 <script src="Markdown.Editor.js"></script>
4 <script src="Markdown.Extra.js"></script>
5 <script src="//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS_HTML-full"></script>
6 <script src="mathjax-editing_writing.js"></script>
7 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

2. Create the html for the text editor. Write text on the left, and the result is displayed on the right.

view source
01 <div id="wmd-button-bar" class="wmd-button-bar"></div>
02 <textarea id="wmd-input" class="column wmd-input" spellcheck="false"></textarea>
03 <div id="wmd-preview" class="column wmd-preview">
04 <noscript>This text editor requires JavaScript.</noscript>
05 </div>
06 <div id="helpicon" class="unselectable">?</div>
07 <div id="help">
08 <div id="closeicon" class="unselectable">X</div>   
09 <pre>   
10   ...
11 </pre>   
12 </div>

3. The CSS to style the editor.

view source
001 * {
002   margin: 0;
003   padding: 0;
004   border: 0;
005   outline: 0;
006 }
007  
008 .unselectable {
009   -webkit-touch-callout: none;
010   -webkit-user-select: none;
011   -khtml-user-select: none;
012   -moz-user-select: none;
013   -ms-user-select: none;
014   user-select: none;
015 }
016  
017 .fixedheight { height: 100%; }
018  
019 .column { padding: 20px; }
020  
021 #wmd-button-bar { display: none; }
022  
023 #wmd-input {
024   float: left;
025   box-sizing: border-box;
026   width: 50%;
027   resize: horizontal;
028   font-size: 14px;
029   border-right: 1px solid #ddd;
030   height: 100%;
031   overflow: y-scroll;
032 }
033  
034 #wmd-preview {
035   overflow-y: auto;
036   overflow-x: hidden;
037   font-size: 15px;
038   height: 100%;
039   box-sizing: border-box;
040 }
041  
042 #wmd-preview li { margin-left: 20px; }
043  
044 #wmd-preview code, #wmd-input { font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, sans-serif; }
045  
046 #wmd-preview p code, #wmd-preview li code {
047   background-color: #f5f5f5;
048   white-space: pre-wrap;
049   padding: 3px 5px;
050   font-size: 13px;
051 }
052  
053 #wmd-preview pre {
054   background-color: #f5f5f5;
055   padding: 5px;
056   margin: 0.5em 0 1em;
057   overflow-x: auto;
058   word-wrap: normal;
059   font-size: 13px;
060 }
061  
062 #wmd-preview blockquote {
063   background-color: #defcff;
064   padding: 10px;
065   margin: 0.5em 0 1em;
066   overflow-x: auto;
067   word-wrap: normal;
068   border-left: 2px solid #0ae2f5;
069 }
070  
071 #wmd-preview blockquote p { margin-bottom: 0; }
072  
073 #wmd-preview hr {
074   background-color: #ddd;
075   color: #ddd;
source : jqueryscript.net

Related posts: