Stackedit Js

admin



Susan Mosteller scmosteller@pstcc.edu

JavaScript #Markdown #Editor #stackedit #google-drive #Dropbox #JavaScript #Blogger #Offline #Gist #WordPress #CouchDB #Zendesk #Github #Gitlab. Basic stackedit repo stats. Monthly Mentions 0. Last Commit 5 days ago. A JavaScript WYSIWYG editor for styling and previewing text inside a browser, complete with support for editing documents in the cloud StackEdit uses Markdown to style text and is widely based on. StackEdit is a powerful online Markdown editor. Like Dillinger, it loads right in your web browser, so there’s no need to download and install an application on your computer. StackEdit has a wide variety of features and configurable options for power users, making it in many ways a better all-around option than comparable desktop applications. StackEdit StackEdit is a full-featured, open-source Markdown editor based on PageDown, the Markdown library used by Stack Overflow and the other Stack Exchange sites.

Add StackEdit to any website. Build setup # install dependencies.

Mary Monroe-Ellis mmonroeellis@pstcc.edu

Josh Dean TheJoshDean.com

Create accessible documents and content that can be easily edited in a Learning Management System and can be read by screenreaders.

[int_0^3left(frac{x^3}4-2x^2-e^xright);operatorname dx;]

Components of a Math Document:

  1. Text:Formatting/navigation Issues
  2. Equations:Screen Reader Issues
  3. Tables: Screen Reader Issues
  4. Images:Alternate Text

Google Docs

Stackedit Js

  • Supports LaTeX
  • Allows poor accessibility practices (i.e. multiple returns, spacing, etc.)

Markdown guides you to create an accessible document without these issues.

What is Markdown?

MarkDown is a text-to-HTML conversion tool.

MarkDown allows you to write using an:

easy-to read

easy-to-write

plain text format

that converts it to structurally valid XHTML (or HTML).

-daringfireball.net

Why Markdown?

Markdown is plain-text: margins, tab stops, page breaks, extra spacing, and formatting are all unsupported, ignored and therefore dropped. This is limiting but also helpful with accessibility.

Text

Multiple spaces, or line breaks in a markdown file are ignored when converted to an HTML document. A Word document copied into a markdown editor is stripped of all formatting and flourishes.

Formatting and styles can be added once we have an HTML file, but Markdown lets you focus on content first.

Basic formatting is easy using simple keystrokes found on the Markdown Reference Guide

Stackedit Js

Equations

Wiris Equation Editor

To edit and create our formulas we use the Wiris editor. Once we use the editor we have the tex code to paste into our markdown file.

Example Equation

Right click on the math formula to see more options.

[int_0^3left(frac{x^3}4-2x^2-e^xright)dx]

Listen to the Jaws screenreader process the above formula:

Your browser does not support the audio element.

The above formula is written using tex or latex code. int_0^3left(frac{x^3}4-2x^2-e^xright)dx

Don't worry we don't need to learn tex code!

Equations

MathType to LaTex

Equations that were created in MathType can be converted to LaTeX without retyping them in Wiris.

Tables

HTML Table Generator

To edit and create tables we use the HTML Table Generator.

Images

![Alt Text](path to the image)

  • FROM THE WEB

    ![Type in the alternate text you want here](copy image address from the web and paste it here )

  • FROM A FILE

    ![Type in the alternate text you want here](This must be the path to your image--which is stored in the same location as your document)

Building an HTML Document

Stackedit Js

Putting Components Together

  • LMS
  • Markdown Editor
    • StackEdit
    • Markdown Pad
    • Marked
  • Web Snippet Tools
    • CodePen
    • Fiddle
  • TheJoshDean

CodePen

To edit and create Markdown we use CodePen.

CodePen

html

CodePen

CSS

CodePen

CSS

Other Formatting Options are Available

CodePen

JavaScript (JS)

MathJax/MathML

JavaScript Library code looks through the document to find the LaTeX and converts that to MathML and Presentation Math which allows the screenreader to step through it.

Copy the Code Below and Insert in JS Settings in CodePen

CodePen

JS

CodePen

This link opens CodePen preloaded with Markdown, Bootstrap3, and the MathJax code settings.

Exporting Your Document

Stackedit

Export.zip

Stackedit Js Cdn

Exporting Your Document

Stackedit Js Import

Create a Project Folder

Stackedit

Further Reading and Tools

  • Stackedit.io - online markdown editor
  • Dillinger.io - online markdown editor
  • MathJax Main Site- math rendering engine
  • TheJoshDean Custom Markdown Previewer
  • Our Markdown Reference Sheet- printable reference sheet
  • Chemistry Examples - MathJax with mhchem package
  • Accessible HTML Course Templates for an LMS.
  • Our Applied Calculus Course - created in markdown

Further Reading and Tools cont...

Further Reading

  • Markdown on Wikipedia - a history and more
  • Mastering Markdown Guide - by Github
  • MarkdownTable Generator and manipulation
  • More Markdown Tips and Tricks - blog post

Further Reading and Tools cont...

Desktop Applications

  • A list of desktop markdown editors - Windows
  • A list of desktop markdown editors - Mac / macOS