LOGIN
Harsha Alva
92
Community Expert
Mechanical Engineer + Software Developer
 · MangaluruIndia
Share
Report
Get Link
STATUS

React Markdown Editor

I’ve been working on a Markdown Editor/Playground for Collaborizm for the past couple of days.
You may check it out at https://mde.collaborizm.com/

Source code will be made public once it’s properly formatted.

Thanks to Robert Lancer for all the help and support. 😃👍

Current Features

  • Syntax highlighting
  • Instant preview beside code.
  • Sync scrolling between input and preview.
  • Complete CFM Reference as a sample document.
  • Export to Markdown and HTML files.
  • State persistence.

Suggestions welcome.

Steven Reubenstone Anton Voltchok John Rodrigues Ranjan Dailata Sai Prasad Nouman Tahir Ravi Pujar Areous Ahmadtj check this out!

Javascript
Web Development
React.js
Contributions
Harsha Alva

Wonderful CZM Markdown playground for the community… Thank you Harsha!!

4 likes 
Like
Award Contribution
Load 3 previous comments
John Rodrigues
93
Community Expert
Product Designer|Entrepreneur |Founder of designwithjohn.com
 · HonnavarIndia
Share
Report
Get Link

Good job Harsha

Like
1 like 
Award Contribution
Harsha Alva
92
Community Expert
Mechanical Engineer + Software Developer
 · MangaluruIndia
Share
Report
Get Link
Like
2 likes 
Award Contribution
Ranjan Dailata
73
Community Expert
Application Architect/Lead Developer
 · ChicagoU.S.
Share
Report
Get Link

So essentially, CZM is a subset of markdown-it and more like a sugar coated Markdown-It parser if I understand it correctly.

I would love to see “Syntax highlighting” , built in emoji and various other plugin’s. Also a possibility of custom implementation and extending the specification 😃

Like
2 likes 
Award Contribution
Ranjan Dailata
73
Community Expert
Application Architect/Lead Developer
 · ChicagoU.S.
Share
Report
Get Link

Harsha Alva How about the integration of Ascii to Math. I’m sure folks will love it 😎

http://asciimath.org/

Like
2 likes 
Award Contribution
Robert Lancer
53
Community Expert
Chief Technology Officer at Collaborizm (Project Leader)
 · New YorkU.S.
Share
Report
Get Link

Ranjan Dailata will check it out

Like
3 likes 
Award Contribution
Harsha Alva
92
Community Expert
Mechanical Engineer + Software Developer
 · MangaluruIndia
Share
Report
Get Link

Ranjan Dailata Robert Lancer

Check this implementation using <eq> tags in Markdown.

<img id="test" />

const equation = tag => tag.replace(/<eq>((.*?\n)*?.*?)<\/eq>/ig, (whole, content) => {
  return 'http://latex.codecogs.com/png.latex?' + encodeURIComponent(content);
});

const img = equation('<eq>(1+xsin(tan(2x+a+b+axb)))/(a+a^2+2ab^6)</eq>');

document.getElementById('test').setAttribute('src', img);

Output:

Like
1 like 
Award Contribution
Leave a reply...
DISCOVER
CHAT
HIRE
ACTIVITY
FEED
New Post
Help
Start Project
Online Users
Share Link
Write something before you submit it!
Photo updated
Request Sent!
Updated
Copied to Clipboard