In-browser Markdown editor

Overview

StackEdit

Build Status NPM version

Full-featured, open-source Markdown editor based on PageDown, the Markdown library used by Stack Overflow and the other Stack Exchange sites.

https://stackedit.io/

Ecosystem

Build

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm start

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

Deploy with Helm

StackEdit Helm chart allows easy StackEdit deployment to any Kubernetes cluster. You can use it to configure deployment with your existing ingress controller and cert-manager.

# Add the StackEdit Helm repository
helm repo add stackedit https://benweet.github.io/stackedit-charts/

# Update your local Helm chart repository cache
helm repo update

# Deploy StackEdit chart to your cluster
helm install --name stackedit stackedit/stackedit \
  --set dropboxAppKey=$DROPBOX_API_KEY \
  --set dropboxAppKeyFull=$DROPBOX_FULL_ACCESS_API_KEY \
  --set googleClientId=$GOOGLE_CLIENT_ID \
  --set googleApiKey=$GOOGLE_API_KEY \
  --set githubClientId=$GITHUB_CLIENT_ID \
  --set githubClientSecret=$GITHUB_CLIENT_SECRET \
  --set wordpressClientId=\"$WORDPRESS_CLIENT_ID\" \
  --set wordpressSecret=$WORDPRESS_CLIENT_SECRET
  
# Upgrade to the latest version
helm repo update
helm upgrade stackedit stackedit/stackedit

# Uninstall StackEdit
helm delete --purge stackedit

# Deploy using your existing ingress controller and cert-manager
# See https://docs.cert-manager.io/en/latest/tutorials/acme/quick-start/index.html
helm install --name stackedit stackedit/stackedit \
  --set dropboxAppKey=$DROPBOX_API_KEY \
  --set dropboxAppKeyFull=$DROPBOX_FULL_ACCESS_API_KEY \
  --set googleClientId=$GOOGLE_CLIENT_ID \
  --set googleApiKey=$GOOGLE_API_KEY \
  --set githubClientId=$GITHUB_CLIENT_ID \
  --set githubClientSecret=$GITHUB_CLIENT_SECRET \
  --set wordpressClientId=\"$WORDPRESS_CLIENT_ID\" \
  --set wordpressSecret=$WORDPRESS_CLIENT_SECRET \
  --set ingress.enabled=true \
  --set ingress.annotations."kubernetes\.io/ingress\.class"=nginx \
  --set ingress.annotations."certmanager\.k8s\.io/issuer"=letsencrypt-prod \
  --set ingress.annotations."certmanager\.k8s\.io/acme-challenge-type"=http01 \
  --set ingress.hosts[0].host=stackedit.example.com \
  --set ingress.hosts[0].paths[0]=/ \
  --set ingress.tls[0].secretName=stackedit-tls \
  --set ingress.tls[0].hosts[0]=stackedit.example.com
Issues
  • StackEdit 4 beta preview

    StackEdit 4 beta preview

    This is a dedicated ticket for any feedback on StackEdit 4 beta preview (https://stackedit-beta.herokuapp.com/).

    Your feedback is much appreciated!

    If you like it, say it. If you don't, or you haven't noticed any difference, say it. If you have any suggestion, I'm happy to hear it. If you just found a bug, declare a new issue.

    If you like StackEdit, please give it 5 stars on the Chrome Web Store...

    Cheers!

    info 
    opened by benweet 108
  • Unable to control the size of images

    Unable to control the size of images

    How do I add a size hint to images?

    Thanks. Great tool!

    enhancement question 
    opened by AshwinJay 58
  • Custom keyboard shortcuts

    Custom keyboard shortcuts

    Hi,

    Is there a way to create new keyboard shortcuts to insert snippets of text? This would be useful for the equation editor. Can the "UserCustom extension" be used for that? Thanks for the help.

    question 
    opened by ghuba 30
  • Integrate MathJax and Prettify on a blog

    Integrate MathJax and Prettify on a blog

    It is a great thing to preview math formula by MathJax in StackEdit, but there is still a problem when I try to publish it to WordPress.

    For example if I type:

    $$f(a)=\frac{1}{2\pi i}\oint_\gamma\frac{f(z)}{z-a}dz$$
    

    then this works well in preview, but when I publish to WordPress, the same code becomes(I think the better way is to keep it in the RAW form, rather than the form produced by MathJax, In fact you will see that in WordPress, the formula looks ugly compared with the preview):

    <span class="MathJax_Preview"></span><div class="MathJax_Display" role="textbox" aria-readonly="true" style="text-align: center;"><span class="MathJax" id="MathJax-Element-1-Frame" style=""><nobr><span class="math" id="MathJax-Span-1" style="width: 12.503em; display: inline-block;"><span style="display: inline-block; position: relative; width: 9.472em; height: 0px; font-size: 132%;"><span style="position: absolute; clip: rect(0.598em 1000.003em 3.412em -0.43em); top: -2.216em; left: 0.003em;"><span class="mrow" id="MathJax-Span-2"><span class="mi" id="MathJax-Span-3" style="font-family: MathJax_Math; font-style: italic;">f<span style="display: inline-block; overflow: hidden; height: 1px; width: 0.057em;"></span></span><span class="mo" id="MathJax-Span-4" style="font-family: MathJax_Main;">(</span><span class="mi" id="MathJax-Span-5" style="font-family: MathJax_Math; font-style: italic;">a</span><span class="mo" id="MathJax-Span-6" style="font-family: MathJax_Main;">)</span><span class="mo" id="MathJax-Span-7" style="font-family: MathJax_Main; padding-left: 0.273em;">=</span><span class="mfrac" id="MathJax-Span-8" style="padding-left: 0.381em; padding-right: 0.111em;"><span style="display: inline-block; position: relative; width: 1.626em; height: 0px;"><span style="position: absolute; clip: rect(1.356em 1000.003em 2.33em -0.376em); top: -2.865em; left: 50%; margin-left: -0.268em;"><span class="mn" id="MathJax-Span-9" style="font-family: MathJax_Main;">1</span><span style="display: inline-block; width: 0px; height: 2.167em;"></span></span><span style="position: absolute; clip: rect(1.41em 1000.003em 2.384em -0.43em); top: -1.512em; left: 50%; margin-left: -0.755em;"><span class="mrow" id="MathJax-Span-10"><span class="mn" id="MathJax-Span-11" style="font-family: MathJax_Main;">2</span><span class="mi" id="MathJax-Span-12" style="font-family: MathJax_Math; font-style: italic;">π<span style="display: inline-block; overflow: hidden; height: 1px; width: 0.003em;"></span></span><span class="mi" id="MathJax-Span-13" style="font-family: MathJax_Math; font-style: italic;">i</span></span><span style="display: inline-block; width: 0px; height: 2.221em;"></span></span><span style="position: absolute; clip: rect(0.869em 1000.003em 1.247em -0.484em); top: -1.296em; left: 0.003em;"><span style="border-left-width: 1.626em; border-left-style: solid; display: inline-block; overflow: hidden; width: 0px; height: 1.25px; vertical-align: 0.003em;"></span><span style="display: inline-block; width: 0px; height: 1.085em;"></span></span></span></span><span class="msubsup" id="MathJax-Span-14" style="padding-left: 0.165em;"><span style="display: inline-block; position: relative; width: 1.085em; height: 0px;"><span style="position: absolute; clip: rect(0.652em 1000.003em 3.195em -0.43em); top: -2.162em; left: 0.003em;"><span class="mo" id="MathJax-Span-15" style="font-family: MathJax_Size2; vertical-align: 0.003em;">∮<span style="display: inline-block; overflow: hidden; height: 1px; width: 0.381em;"></span></span><span style="display: inline-block; width: 0px; height: 2.167em;"></span></span><span style="position: absolute; top: -1.242em; left: 0.598em;"><span class="mi" id="MathJax-Span-16" style="font-size: 70.7%; font-family: MathJax_Math; font-style: italic;">γ<span style="display: inline-block; overflow: hidden; height: 1px; width: 0.003em;"></span></span><span style="display: inline-block; width: 0px; height: 2.167em;"></span></span></span></span><span class="mfrac" id="MathJax-Span-17" style="padding-left: 0.273em; padding-right: 0.111em;"><span style="display: inline-block; position: relative; width: 2.167em; height: 0px;"><span style="position: absolute; clip: rect(1.301em 1000.003em 2.654em -0.43em); top: -2.919em; left: 50%; margin-left: -0.701em;"><span class="mrow" id="MathJax-Span-18"><span class="mi" id="MathJax-Span-19" style="font-family: MathJax_Math; font-style: italic;">f<span style="display: inline-block; overflow: hidden; height: 1px; width: 0.057em;"></span></span><span class="mo" id="MathJax-Span-20" style="font-family: MathJax_Main;">(</span><span class="mi" id="MathJax-Span-21" style="font-family: MathJax_Math; font-style: italic;">z<span style="display: inline-block; overflow: hidden; height: 1px; width: 0.003em;"></span></span><span class="mo" id="MathJax-Span-22" style="font-family: MathJax_Main;">)</span></span><span style="display: inline-block; width: 0px; height: 2.221em;"></span></span><span style="position: absolute; clip: rect(1.626em 1000.003em 2.384em -0.43em); top: -1.512em; left: 50%; margin-left: -1.025em;"><span class="mrow" id="MathJax-Span-23"><span class="mi" id="MathJax-Span-24" style="font-family: MathJax_Math; font-style: italic;">z<span style="display: inline-block; overflow: hidden; height: 1px; width: 0.003em;"></span></span><span class="mo" id="MathJax-Span-25" style="font-family: MathJax_Main; padding-left: 0.219em;">−</span><span class="mi" id="MathJax-Span-26" style="font-family: MathJax_Math; font-style: italic; padding-left: 0.219em;">a</span></span><span style="display: inline-block; width: 0px; height: 2.221em;"></span></span><span style="position: absolute; clip: rect(0.869em 1000.003em 1.247em -0.484em); top: -1.296em; left: 0.003em;"><span style="border-left-width: 2.167em; border-left-style: solid; display: inline-block; overflow: hidden; width: 0px; height: 1.25px; vertical-align: 0.003em;"></span><span style="display: inline-block; width: 0px; height: 1.085em;"></span></span></span></span><span class="mi" id="MathJax-Span-27" style="font-family: MathJax_Math; font-style: italic; padding-left: 0.165em;">d<span style="display: inline-block; overflow: hidden; height: 1px; width: 0.003em;"></span></span><span class="mi" id="MathJax-Span-28" style="font-family: MathJax_Math; font-style: italic;">z<span style="display: inline-block; overflow: hidden; height: 1px; width: 0.003em;"></span></span></span><span style="display: inline-block; width: 0px; height: 2.221em;"></span></span></span><span style="border-left-width: 0.004em; border-left-style: solid; display: inline-block; overflow: hidden; width: 0px; height: 3.504em; vertical-align: -1.425em;"></span></span></nobr></span></div><script type="math/tex; mode=display" id="MathJax-Element-1">f(a)=\frac{1}{2\pi i}\oint_\gamma\frac{f(z)}{z-a}dz</script></p>
    
    question 
    opened by vanabel 27
  • The editor is being slow lately

    The editor is being slow lately

    Starting a few days ago, the editor has been slow and not responsive to what I am typing. It would sometimes take a few seconds before it catches up, and the screen would pause for a short second or two before you can type or move the cursor around again.

    opened by bbhenry 25
  • Sync/save not working

    Sync/save not working

    Haven't used StackEdit in about a month, and (in Chrome) it constantly tries to save (status bar keeps blinking), but it's not saving anything. Same problem when trying to sync back to Google Drive or just using StackEdit in the browser.

    Anyone else seeing this same issue?

    Been a (paying) fan of StackEdit for a while now, and it would suck if this thing's broken.

    opened by gary73 25
  • Google Drive Based Real Time Collaboration

    Google Drive Based Real Time Collaboration

    I must say, you created something which is amazing. This is the best tool for students or anyone who needs to work with both code and math.

    Yet, here are real issues with real time editing of multiple users. Actually, it just doesn't work. The only collaboration model which works is one editor per session.

    First of all, could a real time collaboration like in the native Google Drive application could ever be implemented? Doe Google supply the needed API?

    Second of all, to avoid all "Out of Sync" issues, could you implement one editor per open document? I will explain, Let's say User A shares a file with users B and C (All have edit permissions). At first the document is closed, no one has opened it.

    Let's say B opened the document (Too bad Google Drive doesn't have open as Viewer and open as Editor). Then until he closes it all others have only view permission.

    Once B closes the nest one which opens it first gets the "Editing" permissions.

    By the way, there is a "View" mode of the document. How can I share only "View" mode with other for a file I have on Google Drive?

    Namely I want someone to open the link I give him and see this beautiful blue screen. This is so beautiful!!!

    opened by RoyiAvital 25
  • Syntax highlighting for the editor

    Syntax highlighting for the editor

    The app is so awesome but alas it is lacking a proper syntax highlighting for the editor :(

    enhancement 
    opened by dpashkevich 23
  • Error in Chrome: Mismatched anonymous define() module

    Error in Chrome: Mismatched anonymous define() module

    Uncaught Error: Mismatched anonymous define() module: function (){return $}
    http://requirejs.org/docs/errors.html#mismatch
    

    image

    Chrome

    Version 47.0.2526.111 m

    Tried flushing cookies and localStorage.

    Works fine in Firefox.

    opened by Schweinepriester 21
  • Having two documents open at the same time?

    Having two documents open at the same time?

    I'm using Stackedit with Google Drive. Currently, it's not possible to have two different files open. Is this a bug or a feature?

    enhancement question 
    opened by shervinafshar 21
  • Please add Font Awesome Support

    Please add Font Awesome Support

    Font Awesome is not supported in StackEdit's latest version, It would be great if this feature is added It will also be helpful in drawing Mermaid-js Charts, graphs, and diagrams, etc.

    opened by coderocker 0
  • Feature request: New pane or explorer section for navigating document by headings

    Feature request: New pane or explorer section for navigating document by headings

    I have some longer files with very many headings. I'm looking for a better way to navigate between headings. Currently using page up and down which is kind of slow. Maybe something already exists? If not, I was thinking about an extra pane, or section under each file in the explorer pane, containing a list of headings for double clicking on for navigation?

    opened by simonhf 1
  • google drive sync workspace issues

    google drive sync workspace issues

    When using google drive workspace in chrome 91, the files are not synced. In the console the errors are:

    Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute
    Because a cookie’s SameSite attribute was not set or is invalid, it defaults to SameSite=Lax, 
    which prevents the cookie from being sent in a cross-site request. 
    This behavior protects user data from accidentally leaking to third parties and cross-site request forgery.
    Resolve this issue by updating the attributes of the cookie:
    Specify SameSite=None and Secure if the cookie should be sent in cross-site requests. 
    This enables third-party use.
    Specify SameSite=Strict or SameSite=Lax if the cookie should not be sent in cross-site requests.
    

    Affected resources:

    Name	Domain & Path
    SIDCC	.google.com/
    

    Explenation: https://web.dev/samesite-cookies-explained

    opened by msangel 0
  • Example ABC files from the ABC spec do not render correctly

    Example ABC files from the ABC spec do not render correctly

    ABC standard is documented here, with some example files included near the end:

    http://abcnotation.com/wiki/abc:standard:v2.1#sample_abc_tunes

    Here are those examples in a markdown file: ABC test.md

    • Meter changes are not displayed in the song "Old Sir Simon the King"
    • In-line meter changes are not displayed in the song "William and Nancy" and prevent it from being parsed at all. (I have removed the abc tag so the source is displayed in the attached file)
    • When there’s multiple songs in the same file, it only displays the first one unless you place each one individually in ```abc tags

    If this bug should instead be opened against some other project that Stackedit uses to render these files, let me know which.

    opened by r4dian 0
  • Can't export document with Korean

    Can't export document with Korean

    It is possible to work with Korean, to save md file in dropbox. It is also possible to export as HTML with Korean. But if I try to export as pdf or docx, I get file with filled with empty character that was Korean characters.

    opened by kdm1jkm 0
  • express should not be in dev dependencies

    express should not be in dev dependencies

    script will run directly on services such as heroku if we move express dependency. otherwise it fails.

    opened by ganganimaulik 0
  • [New][Feature] - Add colours in folder structure

    [New][Feature] - Add colours in folder structure

    Idea:

    I think a good feature would be the option to add differentiating colours to folders.

    Reason:

    As the photo below shows, adding more folders/subfolders will make it harder to read the structure and to find the right files

    image

    opened by xTavi 0
  •  GitHub publish/sync HTTP error 422 solution

    GitHub publish/sync HTTP error 422 solution

    Branch — optional If not supplied, the master branch will be used.

    The default branch name for new repositories created on GitHub is now main. https://github.com/github/renaming

    P. S. Thanks a lot for great editor!

    opened by r3sus 0
  • Utilizing Stackedit in .NET app

    Utilizing Stackedit in .NET app

    Hi! Thank you for the cool product! What is the best way to use it in my .NET app? Basically I need md editor, allowing me to set/get it`s current content and handle content change events.

    Thank you in advance for your answer!

    opened by assopri 0
  • how to use in React.js

    how to use in React.js

    https://github.com/facebook/react

    thank you very much

    opened by stfenjobs 0
Releases(v5.14.0)
In-browser Markdown editor

StackEdit Full-featured, open-source Markdown editor based on PageDown, the Markdown library used by Stack Overflow and the other Stack Exchange sites

Benoit Schweblin 18.2k Jul 25, 2021
A free and open source code snippets manager for developers.

massCode The second version in beta stage is available in the v2 branch, builds are available in the releases A free and open source code snippets man

Anton Reshetov 1.7k Jul 24, 2021
:notebook: Simple and beautiful notepad to Markdown with Vue.js and Local Storage API

vNotes Simple and beautiful notepad to Markdown with VueJs and Local Storage API. DEMO Will be implemented I started the development for upgrade to Vu

Igor Luiz Halfeld 49 Mar 24, 2021
A community managed site for Cardano Catalyst. Aiming to gather resources and serve as an information hub for the community

Project Catalyst ** Under Construction ** A central location for managing and improving Project Catalyst. This site is built using Vuepress How to sta

Project Catalyst 13 Jul 20, 2021
webchat via WebSockets/WebRTC that allows messaging/video call/screen sharing

Live demo: pychat.org, video Table of contents About When should I use pychat How to host pychat Run test docker image Run prod docker image Native se

Andrew 172 Jul 23, 2021
📕 A website simulating linux system's GUI, using theme of Deepin distro.

About GoodManWEN.github.io A website simulating linux system's GUI, using theme of Deepin distro. You can write blogs with markdown and use it to serv

null 1.1k Jul 22, 2021
:white_check_mark: Todoist clone, written in Rails + Vue

Imitation is the sincerest form of flattery. This is a clone of the Todoist web-app. Here's how it looks: Visit a live instance to check it out! You c

Paul Kuruvilla 192 Jul 24, 2021
Elegant Markdown Editor.

EME Download You can manually download the latest release here Features It just suits, show editor or preview or both just as you wish. Focus mode, wr

Kevin Hazy 2k Jul 17, 2021
Lulumi-browser is a lightweight browser coded with Vue.js 2 and Electron.

Lulumi-browser Lulumi-browser is a lightweight browser coded with Vue.js 2 and Electron. If you like this and would like to support it. Check out my p

Lulumi Project 383 Jul 27, 2021
redesign blog using material design

Materialize Blog A new blog management system designed according to Google Material Design. Back-end base on Laravel 5.3, a PHP application framework

forehalo 211 Jul 12, 2021
🐣 vue GUI generator

vuegg vue.js GUI generator [ Mockups and code in one go! ] About vuegg Scaffold vuejs projects by dragging-dropping components directly into the visua

vuegg 2k Jul 24, 2021
🚀 A dashboard for your homelab

Dashy Dashy helps you organize your self-hosted services, by making them all accessible from a single place Features ?? Instant search by name, domain

Alicia Sykes 211 Jul 19, 2021
Download file Block for Kirby block editor

Download file Block for Kirby block editor How to dev Install parcel globaly npm install -g parcel-bundler Start watch process npm run dev Start buil

baptiste lhopitault 3 May 19, 2021