A
Project Report
On
"Markit Markdown Editor"
Prepared by
Dalal Dhruvil Jignesh (17DIT004)
Imran Khan (17DIT019)
Under the guidance of
Mohammed Husain Bohara
Assistant Professor
A Report Submitted to
Charotar University of Science and Technology
for Partial Fulfillment of the Requirements for the
3rd Semester Software Group Project-I(IT244)
Submitted at
CE/CSE/IT
DEPSTAR
At: Changa, Dist: Anand – 388421
DEPSTAR(IT)
1
CERTIFICATE
This is to certify that the report entitled “Markit Markdown Editor” is a bonafied
work carried out by Mr. Dalal Dhruvil Jignesh (17DIT004) under the guidance
and supervision of Assistant Prof. Mohammed Husain Bohara of Internal
Guide for the subject IT244(For IT)-Software Group Project(IT) of 3rd Semester
of Bachelor of Technology in DEPSTAR at Faculty of Technology & Engineering
– CHARUSAT, Gujarat.
To the best of my knowledge and belief, this work embodies the work of candidate
himself, has duly been completed, and fulfills the requirement of the ordinance
relating to the B.Tech. Degree of the University and is up to the standard in respect
of content, presentation and language for being referred to the examiner.
Mohammed Husain Bohara
Assistant Professor
Branch Name(CE/CSE/IT)
DEPSTAR, Changa, Gujarat.
Dr. Amit Ganatra
Principal, DEPSTAR
Dean, FTE
CHARUSAT, Changa, Gujarat.
Devang Patel Institute of Advance Technology And Research At: Changa, Ta. Petlad,
Dist. Anand, PIN: 388 421. Gujarat
DEPSTAR(IT)
2
CERTIFICATE
This is to certify that the report entitled “Markit Markdown Editor” is a bonafied
work carried out by Mr. Imran Khan (17DIT019) under the guidance and
supervision of Assistant Prof. Mohammed Husain Bohara of Internal Guide
for the subject IT244(For IT)-Software Group Project(IT) of 3rd Semester of
Bachelor of Technology in DEPSTAR at Faculty of Technology & Engineering –
CHARUSAT, Gujarat.
To the best of my knowledge and belief, this work embodies the work of candidate
himself, has duly been completed, and fulfills the requirement of the ordinance
relating to the B.Tech. Degree of the University and is up to the standard in respect
of content, presentation and language for being referred to the examiner.
Mohammed Husain Bohara
Assistant Professor
Branch Name(CE/CSE/IT)
DEPSTAR, Changa, Gujarat.
Dr. Amit Ganatra
Principal, DEPSTAR
Dean, FTE
CHARUSAT, Changa, Gujarat.
Devang Patel Institute of Advance Technology And Research At: Changa, Ta. Petlad,
Dist. Anand, PIN: 388 421. Gujarat
DEPSTAR(IT)
3
ACKNOWLEGEMENT
We would like to express our special thanks of gratitude to our coordinator Prof.
Mohammed Hussain Bohara as well as our principal Dr. Amit Ganatra who
gave us the golden opportunity to do this wonderful project on the topic
Markdown Editor, which also helped us in doing a lot of Research and we came
to know about so many new things. We are really thankful to them.
Secondly we would also like to thank our faculties and friends who helped us a
lot in finalizing this project within the limited time frame.
We express our gratitude to our College Devang Patel Institute of Advanced
Technology & Research to provide us with all facilities, which were necessary
in the completion of this project.
DEPSTAR(IT)
4
ABSTRACT
This is a WEB APP projects is all about the editor which is cross platform
which is enabled on every operating system example MAC OS, LINUX,
Ubuntu, Windows etc. This project editing of the document can be made offline.
In these first the user login itself and can work on his own so security is provide
and no data lick takes place. This is generally used to generate the research
papers. In which user first login himself via Google, GitHub.
In this user can add photos, user can also use Emoji’s and can highlight
anything. Can also give the heading Example H1, H2, H3, H4, H5, H6. To
Provide platform to Edit, Text. Generate Research paper. Any official File paper
can be edited.
DEPSTAR(IT)
5
INDEX
1. Project Definition
 Project Title
 Project Goal
2. Description
 What is Markdown.
 How to use Markdown for Technical Writing.
 Markdown Versus Other Markup Language.
 History of Markdown Editor.
 Why to use the Markdown Editor.
3. Software and Hardware Requirements
 Git.
 Node JS.
 Heroku
 V S Code
4. Major Functionality
 How the Markit Functions.
5. Flow Chart (Graphical representation of your project)
6. Screenshots of your project output
 Signup Page.
 Signup with Google.
 Signup with Git Hub.
 Actual Project Layout.
DEPSTAR(IT)
6
7. Limitations of project
 Flavors
 Lack of Extensibility
 Lack of Semantic Meaning
 Lack of Standard
8. Outcome
9. Future Enhancement
10 References
DEPSTAR(IT)
7
Project Definition:
Project Title
Markit Markdown Editor
Project Goal
To Provide platform to Edit, Text. Generate Research paper.
Any official File paper can be edited.
Objectives
Steps to achieve the goal
Project description
If plain text is too minimal for you because you need formatting,
but you don't want to waste time with too much formatting with
the likes of Microsoft Word, then Markdown is a good inbetween.
Software specification
V S CODE, Node.js, Git, React.js, OAuth2.0.
Hardware specification
Hardware environment used i5 Processor, Windows 10.
Problems to be
addressed
Lack of awareness regarding markdown, how it is different, it’s
scope, usage, advantages & disadvantages.
Expected outcome
Any user or organization will be able to use this product for all
the text-formatting, editing, technical writing/documentation
requirements.
Duration
2 months approx..
Team Size
2
Team Members (Name)
Dhruvil Dalal (17DIT004)
Imran Khan(17DIT019)
Division of
responsibility
Dhruvil: Documentation, HTML,CSS
Imran: React.js, Node.js, Dependencies
DEPSTAR(IT)
8
DESCRIPTION:
MARKDOWN:
Markdown is a lightweight markup language with plain text formatting syntax.
It is designed so that it can be converted to HTML and many other formats
using a tool by the same name. Markdown is often used to format readme files,
for writing messages in online discussion forums, and to create rich text using
a plain text editor. As the initial description of Markdown contained ambiguities
and unanswered questions, many implementations and extensions of Markdown
appeared over the years to answer these issues.
Markdown can be used if
1. Anywhere you want to use plain text
2. If you want to store text in an easy to read format
3. You want to stay away from binary/proprietary formats and stay
lightweight
4. You want the ability to render text in HTML, which is the defacto
standard of rendering content on web.
DEPSTAR(IT)
9
What is Markdown Editor?
The first thing you really need to know about Markdown is that it’s a way of
formatting text content in an editor – without requiring you to know or use
coding languages like HTML or CSS. You certainly don’t need to know some
other programming language such as JavaScript or Ruby.
Syntax
For our purposes, Markdown is “plain text formatting syntax” – but it’s also a
tool (parser) that converts this plain text formatting into HTML to display on the
web.
The Markdown syntax is the information that your tool holds about the text. So
for example, presentational syntax tells you how to present the text, as in the
case of making it bold or underlined. Semantic syntax tells you what the text
actually is, so that could be a list or a reference.
Markdown is fairly notable in that it combines both presentational and semantic
syntax.
How to use Markdown for Technical Writing?
The key way you work with Markdown is in a file with an extension that is
either. Markdown or .md. You write your text in the normal way, but format it
using Markdown syntax – which can be found online.
You save your files in the Markdown format if you’re working in a plain text
editor, or ensure your editor has a parser for Markdown. Many editors support
Markdown, like Document360 which is our knowledge base platform. If a
product supports Markdown, the company will tell you somewhere on their
features page or their homepage.
Just try using a bit of Markdown in Trello to format some of your cards. It
presents a vast improvement over no formatting and is relatively easy to do.
DEPSTAR(IT)
10
Markdown Versus Other Markup Languages
Markdown is just one kind of markup language, of which there are many. The
name “Markdown” is in fact a play on words of the term “markup”.
Markdown is used to render plain text in the browser but other markup
languages may communicate directly with the computer. XML (Extensible
Markup Language) is both human and machine-readable.
According to Webopedia, a markup language is defined as a tool used for:
“The processing, definition and presentation of text. The language specifies
code for formatting, both the layout and style, within a text file. The code used
to specify the formatting are called tags.
“HTML is a an example of a widely known and used markup language.”
This means that the tags for formatting are directly applied within the plain text
file, as opposed to being specified in a separate file like CSS for example.
HTML stands for Hypertext Markup Language, and probably the best-known
markup language used on the web today. Markdown has evolved as a way to
simplify markup for web users.
DEPSTAR(IT)
11
History of Markdown Editor
Markdown was first created in 2004 by John Gruber, who collaborated with
Aaron Schwartz on the syntax.
The reason they began their project is because historical markup languages were
not at all easy for the average person to use.
The term “markup language” originated in the traditional publishing industry,
where documents would be literally “marked up” by the author or editor. This
was to tell the printer how to format the document when printing the final copy.
Imagine you had to write something, but also needed to communicate
systematically to other people down the production line that you want:





This bit in bold
This bit to be a heading
This should be a quote from another author
Tell them an image is to go here
This whole section highlighted
Enter Markup Languages
Since most markup languages were originally designed for very complex
technical projects, there grew a need for a “lightweight” markup language. It
had to be so simple that just anyone could use it – without years of training.
Technical Writer Tony Ibbs delivered a very interesting talk at Write the Docs
Prague 2018 about the history of markup languages.
DEPSTAR(IT)
12
When Should you Use Markdown?
So why should you use Markdown instead of a WYSIWYG editor, which are
standard and abundant nowadays?
The answer is that a WYSIWYG editor usually requires you to click buttons to
achieve the formatting you want, and you are limited by the design of the
software creators. You also have to work in your chosen editor at all times,
which takes the focus away from the actual content.
Some people are concerned that Markdown doesn’t have enough functionality
to suit their needs or if they extend it then the content won’t be reusable.
Markdown can be extended with extra functionality. This means someone
creates another version (or “flavour”) of Markdown to suit their needs. On the
other hand, if you extend it, your Markdown flavour may not be portable to
another platform.
Ask yourself whether you are likely to have thousands of pages content to be
potentially reused across multiple platforms such as web, internal knowledge
base, and print?
In this case, Markdown probably isn’t for you.
But if you want to quickly create simple text documentation with rich
formatting, then Markdown may be for you.
DEPSTAR(IT)
13
Should I Use Markdown Editor?
Just like anything, Markdown is a good choice if your project needs are suited
to it. Markdown has limited functionality because of the way it was designed.
This makes some people swear by it and some people hate it.
Think about the interface in which your content is being created, the technical
complexity of your documentation project, and the types of users who will need
to create and review documentation.
Make sure you design the proper workflow for your documentation, and
research the proper technical writing tools for delivery to avoid future styling
issues. Markdown is not an editor in itself, so it has to be coupled with a CMS
(Content Management System) to produce live documentation.
If you want to extend your Markdown-formatted documentation with CSS or
more HTML, it’s important to note that these extensions will stop the style of
your content being portable between systems. Some things you have added to
work in your current editor (eg Document360 being one editor) may not port
well, and therefore not work in a different editor.
It’s probably safe to say that many of the problems people using Markdown
come from using it in inappropriate contexts. Markdown is safe to use if you
know exactly what it can do, and what its limitations are .
DEPSTAR(IT)
14
HARDWARE AND SOFTWARE REQUIRED:
DEPSTAR(IT)
15
GIT:
Git is a version-control system for tracking changes in computer files and
coordinating work on those files among multiple people. It is primarily used for
source-code management in software development,[8] but it can be used to keep
track of changes in any set of files. As a distributed revision-control system, it is
aimed at speed,[9] data integrity,[10] and support for distributed, non-linear
workflows.
V S Code:
Visual
Studio
Code is
a source
by Microsoft for Windows, Linux and macOS.
code
It
editor developed
includes
support
for debugging, embedded Git control, syntax highlighting, intelligent code
completion, snippets, and code refactoring. It is also customizable, so users can
change the editor's theme, keyboard shortcuts, and preferences. It is free and
open-source, although the official download is under a proprietary license.
Visual Studio Code is based on Electron, a framework which is used to
deploy Node.js applications for the desktop running on the Blink layout engine.
Although it uses the Electron framework, the software does not use Atom and
instead employs the same editor component (codenamed "Monaco") used
in Visual Studio Team Services (formerly called Visual Studio Online.
DEPSTAR(IT)
16
NODE JS
Node.js is an open-source, cross-platform JavaScript run-time environment that
executes JavaScript code outside of a browser. Historically, JavaScript was used
primarily for client-side scripting, in which scripts written in JavaScript are
embedded in a webpage's HTML and run client-side by a JavaScript engine in
the user's web browser. Node.js lets developers use JavaScript to write
Command Line tools and for server-side scripting—running scripts server-side
to produce dynamic web page content before the page is sent to the user's web
browser. Consequently, Node.js represents a "JavaScript everywhere" paradigm,
unifying web application development around a single programming language,
rather than different languages for server side and client side scripts.
REACT JS
React is a front-end library developed by Facebook. It is used for handling the
view layer for web and mobile apps. ReactJS allows us to create reusable UI
components. It is currently one of the most popular JavaScript libraries and has
a strong foundation and large community behind it.
HEROKU
Heroku is a cloud platform as a service (PaaS) supporting several programming
languages. Heroku, one of the first cloud platforms, has been in development
since June 2007, when it supported only the Ruby programming language, but
now
supports Java, Node.js, Scala, Clojure, Python, PHP,
and Go. For
this
reason, Heroku is said to be a polyglot platform as it lets the developer build,
run and scale applications in a similar manner across all the languages. Heroku
was acquired by Salesforce.com in 2010 for $212 million.
DEPSTAR(IT)
17
MAJOR FUNCTIONALTIY:
As a result of its simplicity, Markdown quickly became very popular among
web writers.
Interestingly, it experienced a surge in popularity among technical writers
around 2016. Some people were very excited about Markdown, while others –
not so much.
Many technical writers find lots of benefits in using Markdown for their
documentation. Some of these benefits are:





Markdown provides semantic meaning for content in a relatively simple
way
You can write rich formatted content extremely quickly (compared to
writing directly in HTML tags)
You can read Markdown easily in plain text before it is rendered later by
HTML
It doesn’t interrupt your workflow with the need to click buttons
It’s platform-agnostic so your content is not tied to the format of your
editor
Markdown is also lightweight, which means you don’t have to learn a lot to get
started with it.
Lots of product documentation is written in Markdown because it is so versatile,
and it can usually be transferred between different platforms. For example, you
can write in Markdown in a text editor like Atom, or even a version-control
platform such as GitHub since that also supports Markdown.
Markdown can be used in Static Site Generators such as Jekyll or Hugo, which
are tools specifically designed to be documentation sites.
It also works in our own knowledge base software, Document360, which allows
you to work in Markdown in the editor and provides shortcuts for writing in
Markdown.
DEPSTAR(IT)
18
Flowchart
DEPSTAR(IT)
19
Workflow SCREEN SHOTS:
Sign In Page
Sign Via Google
DEPSTAR(IT)
20
Signing with GitHub
PREVIEW
OUTPUT
DEPSTAR(IT)
Actual Project Screen
CODING
AREA
21
Limitations
Flavors
The main reason for this lack of adoption is that people using Markdown haven’t been
sitting still for all these years. Because the original Markdown is so limited, every
popular tool built on top of Markdown implements what is called a “flavor” of
Markdown. This sounds great, except that every tool implements a different flavor.
Even tools that do similar things with the language use different syntax for it!
Lack of Extensibility
With other markup languages, you can extend the language to provide the features that
you need. They have mechanisms in the syntax to add new functionality, without
breaking from the original spec and creating a new language.re Structured Text for
example, has both inline and block level mark-up:
Lack of Semantic Meaning
Though many people have added extensions to Markdown, almost none have any kind
of semantic meaning. This means that you can’t write a Class or a Warning, you can
only write text.
This leads people to embed HTML directly in their Markdown:
Lack of a standard
For a long time, Markdown was defined by the initial implementation written by John
Gruber. There was no spec, and the “proper” behaviour was whatever this script chose
to do.
As Markdown got popular, more and more sites started to implement it. Those sites
were written in other languages, so more implementations of Markdown were created.
All of these implementations had slight variations in what was accepted.
DEPSTAR(IT)
22
Future Enhancements
1. Make the documents exportable in various file formats such as .pdf, .doc,
.word etc.
2. Mark which team member edits the document.
3. Add support for highlighting important parts in docs.
4. Add support for commenting at any piece of text in the document.
5. Generate unique link for each document.
6. Optimize code.
DEPSTAR(IT)
23
References
1. https://dillinger.io/ Dillinger is a cloud-enabled, mobile-ready, offlinestorage, AngularJS powered HTML5 Markdown editor.
2. https://www.npmjs.com/package/markdown markdown-js, Yet another
markdown parser, this time for JavaScript. There's a few options that
precede this project but they all treat markdown to HTML conversion as
a single step process. You pass markdown in and get HTML out, end of
story. We had some pretty particular views on how the process should
actually look, which include
3. http://www.passportjs.org/docs/ Passport is authentication middleware
for Node. It is designed to serve a singular purpose: authenticate requests.
When writing modules, encapsulation is a virtue, so Passport delegates all
other functionality to the application. This separation of concerns keeps
code clean and maintainable, and makes Passport extremely easy to
integrate into an application.
4. https://oauth.net/2/ OAuth 2.0 is the industry-standard protocol for
authorization. OAuth 2.0 supersedes the work done on the original OAuth
protocol created in 2006. OAuth 2.0 focuses on client developer
simplicity while providing specific authorization flows for web
applications, desktop applications, mobile phones, and living room
devices.
5. https://reactjs.org/ React makes it painless to create interactive UIs.
Design simple views for each state in your application, and React will
efficiently update and render just the right components when your data
changes.
DEPSTAR(IT)
24
LOG BOOK
Week 1:
Date:
Activities
Searched Definition For Project
Getting clear requirements for
Project
Searched about logic to use in the
Project
Downloaded the software to be used
Started Learning language required
for this project.
Guided Remark
Week 2:
Date:
Activities
Started Coding
First UI part using HTML and CSS
Continued on the UI part
Searched About different UI that
can be used
Worked on the color Combination
DEPSTAR(IT)
Guided Remark
25
Week 3:
Date:
Activities
Worked on main logical part of
project.
And kept our project on the local
host
Then worked on the sign in and sign
out page.
Using Google and GitHub api for
login.
Added Emoji Support.
Designed logo for the project.
Guided Remark
Week 4:
Date:
Activities
Documented the project.
Made presentation for internal
review.
Implemented suggested changes.
Made report for external review.
Submitted final project along with
project demo.
DEPSTAR(IT)
Guided Remark
26