Giter Club home page Giter Club logo

commonmark-web's Introduction

CommonMark

CommonMark is a rationalized version of Markdown syntax, with a spec and BSD-licensed reference implementations in C and JavaScript.

Try it now!

For more details, see https://commonmark.org.

This repository contains the spec itself, along with tools for running tests against the spec, and for creating HTML and PDF versions of the spec.

The reference implementations live in separate repositories:

There is a list of third-party libraries in a dozen different languages here.

Running tests against the spec

The spec contains over 500 embedded examples which serve as conformance tests. To run the tests using an executable $PROG:

python3 test/spec_tests.py --program $PROG

If you want to extract the raw test data from the spec without actually running the tests, you can do:

python3 test/spec_tests.py --dump-tests

and you'll get all the tests in JSON format.

JavaScript developers may find it more convenient to use the commonmark-spec npm package, which is published from this repository. It exports an array tests of JSON objects with the format

{
  "markdown": "Foo\nBar\n---\n",
  "html": "<h2>Foo\nBar</h2>\n",
  "section": "Setext headings",
  "number": 65
}

The spec

The source of the spec is spec.txt. This is basically a Markdown file, with code examples written in a shorthand form:

```````````````````````````````` example
Markdown source
.
expected HTML output
````````````````````````````````

To build an HTML version of the spec, do make spec.html. To build a PDF version, do make spec.pdf. For both versions, you must have the lua rock lcmark installed: after installing lua and lua rocks, luarocks install lcmark. For the PDF you must also have xelatex installed.

The spec is written from the point of view of the human writer, not the computer reader. It is not an algorithm---an English translation of a computer program---but a declarative description of what counts as a block quote, a code block, and each of the other structural elements that can make up a Markdown document.

Because John Gruber's canonical syntax description leaves many aspects of the syntax undetermined, writing a precise spec requires making a large number of decisions, many of them somewhat arbitrary. In making them, we have appealed to existing conventions and considerations of simplicity, readability, expressive power, and consistency. We have tried to ensure that "normal" documents in the many incompatible existing implementations of Markdown will render, as far as possible, as their authors intended. And we have tried to make the rules for different elements work together harmoniously. In places where different decisions could have been made (for example, the rules governing list indentation), we have explained the rationale for our choices. In a few cases, we have departed slightly from the canonical syntax description, in ways that we think further the goals of Markdown as stated in that description.

For the most part, we have limited ourselves to the basic elements described in Gruber's canonical syntax description, eschewing extensions like footnotes and definition lists. It is important to get the core right before considering such things. However, we have included a visible syntax for line breaks and fenced code blocks.

Differences from original Markdown

There are only a few places where this spec says things that contradict the canonical syntax description:

  • It allows all punctuation symbols to be backslash-escaped, not just the symbols with special meanings in Markdown. We found that it was just too hard to remember which symbols could be escaped.

  • It introduces an alternative syntax for hard line breaks, a backslash at the end of the line, supplementing the two-spaces-at-the-end-of-line rule. This is motivated by persistent complaints about the “invisible” nature of the two-space rule.

  • Link syntax has been made a bit more predictable (in a backwards-compatible way). For example, Markdown.pl allows single quotes around a title in inline links, but not in reference links. This kind of difference is really hard for users to remember, so the spec allows single quotes in both contexts.

  • The rule for HTML blocks differs, though in most real cases it shouldn't make a difference. (See the section on HTML Blocks for details.) The spec's proposal makes it easy to include Markdown inside HTML block-level tags, if you want to, but also allows you to exclude this. It also makes parsing much easier, avoiding expensive backtracking.

  • It does not collapse adjacent bird-track blocks into a single blockquote:

    > these are two
    
    > blockquotes
    
    > this is a single
    >
    > blockquote with two paragraphs
    
  • Rules for content in lists differ in a few respects, though (as with HTML blocks), most lists in existing documents should render as intended. There is some discussion of the choice points and differences in the subsection of List Items entitled Motivation. We think that the spec's proposal does better than any existing implementation in rendering lists the way a human writer or reader would intuitively understand them. (We could give numerous examples of perfectly natural looking lists that nearly every existing implementation flubs up.)

  • Changing bullet characters, or changing from bullets to numbers or vice versa, starts a new list. We think that is almost always going to be the writer's intent.

  • The number that begins an ordered list item may be followed by either . or ). Changing the delimiter style starts a new list.

  • The start number of an ordered list is significant.

  • Fenced code blocks are supported, delimited by either backticks (```) or tildes (~~~).

Contributing

There is a forum for discussing CommonMark; you should use it instead of github issues for questions and possibly open-ended discussions. Use the github issue tracker only for simple, clear, actionable issues.

Authors

The spec was written by John MacFarlane, drawing on

  • his experience writing and maintaining Markdown implementations in several languages, including the first Markdown parser not based on regular expression substitutions (pandoc) and the first markdown parsers based on PEG grammars (peg-markdown, lunamark)
  • a detailed examination of the differences between existing Markdown implementations using BabelMark 2, and
  • extensive discussions with David Greenspan, Jeff Atwood, Vicent Marti, Neil Williams, and Benjamin Dumke-von der Ehe.

Since the first announcement, many people have contributed ideas. Kārlis Gaņģis was especially helpful in refining the rules for emphasis, strong emphasis, links, and images.

commonmark-web's People

Contributors

brson avatar cklim2024 avatar coding-horror avatar dkkv avatar jesseweinstein avatar jgm avatar macsual avatar oriain avatar sburris0 avatar sfsam avatar waldyrious avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

commonmark-web's Issues

The very last line in the last exercise should not be indented

Hi,

We tried your awsome learning experiences, but we believe the last exercise has a small flaw.

The line containing "Bon appetit!" needs to be indented under the last item on the ordered list for the test to complete.

It seems like the greeting is not a sub-element of the last orded item "Serve".

License

Is the code of this repository available under a open source license?

Incorrect rendering on commonmark dingus

While trying out Example 235 on the dingus, I found that an ordered list with the list marker having 4+ digits is rendered only with last 4 digits of the marker. The issue is related to the fixed position of list delimiter in the preview box.
Capture

[How to] Include an email address as a link [Already Solved]

Greetings Dear Contributers,
I hope this post finds you well.

I'm new to using Commonmark-web in my email client. I was wondering if it's possible to insert an email address as a link.
For someone like you guys, this does seem like a newbie question, and in fact, it is.
I'm basically a medical student, and my only interest in programming is in its methodologies and concepts, so I am not really familiar with mailing lists and what so ever.
I found the answer after I opened a mail I got with the marks < > in it, and that's the answer to my question. Little did I know, for someone who ignores the manuals like myself, this was emphasised in one of your interactive lessons.

My request here is to include some examples using example email addresses, to let me and other tech-illiterate people like myself to know that an email is usually dealt with as a link. An information I didn't know of until now. @_@"

I hope my post wasn't inappropriate,
Kind Regards,
MohamadAli Halwani

Problem with tutorial lesson 7 - links

The last exercise on links (part 7 - making links to hurricanes) doesn't accept the correct answer as the link given in the question doesn't match the one shown in the hint.

We need i18n support

This may first require restructuring the code so all the localizable strings are in one centralized area, for ease of swapping out per language.

We also need a bit of UI at the start to let the user select a language -- or browser detection of the current language.

The website conflates emphasis with italic and bold

The quick reference and the tutorial on commonmark.org says that asterisks or underscores are used for italic and bold, terms that are never used in the specification.

Both the CommonMark spec and the original Markdown description indicate that such syntax is for emphasis and strong emphasis, and imply that they are equivalent to <em> and <strong>. This aligns with older HTML specifications and terminology, and whether the CommonMark specification should be updated to more closely match HTML: The Living Standard is a separate issue better discussed on the commonmark-spec repository or forums.

But at the very least, I believe the quick reference and tutorial should match the specification, and not have *Italic* and **Bold** as examples.

last exercise

in the last exercise

why is bon apetit! also idented? it is not part of the last item.

Migrate to an framework

I think that migrating to a framework will help us to maintain the website more easily and implement internalization.

I propose to use Next.js it's an react framework.

I can start the migration if you want.

FEATURE: Offer link to quick-reference

There are too many links to this tutorial and none to a quick-reference i could find on discourse.

Having a link for advanced users who just want a quick-reference table to learn the markdown peculiarities for one particular implementation would be great.

Misleading wording in "Paragraphs" section

The phrase "Format this poem so the lines end exactly as shown in the editor" is confusing.
If I change the editor contents to visually match the initial state of the preview pane, the phrase's requirement is fulfilled, yet the tutorial does not recognize this as a pass condition (see screenshot).
Recommend rewording.
Capture of paragraph section

tutorial design

The tutorial is written with massive static code duplication.

  • Is it being generated from some static templates outside of this repository, or is changing it an entirely manual activity?

  • Does any particular consideration preclude a single-page solution, with dynamically-populated content?

dingus doesn't work

Preview doesn't work on latest Linux version of Firefox (81), nor any other scripted buttons.

Feedback for triage: Walking through tutorial end-to-end

I walked through the tutorial (took about 45 minutes end-to-end to capture my notes) in response to @coding-horror tweet. Funny, I feel a bit guilty now using the GitHub keyboard shortcut to generate that link :)

I figured I'd put all my feedback in one issue so you can split into multiple issues if valid. Hope this works. If not, I'd love to hear your feedback!

Homepage

1. Begin Lesson button changes from blue to red after a few seconds.

Made me do a double-take, like "did something move on the page?"

image

2. Suggestions to wording on homepage - Avoid passive voice

Feel free to ignore me. My high school English teacher taught for 50 years, including through two(!) Category 5 hurricanes (may she rest in peace). I feel an obligation to pass along her teachings. :)

 "Each lesson introduces a single Markdown concept with a simple example." 
 "Complete a few practice exercises with your new knowledge." 

And I'd move the "Experiment and have fun!" to last line. Otherwise, I stop reading after "have fun!" :)

3. "Select the red pulsing circles for details."
I was looking for these on this page. Perhaps...

 "Select the red pulsing circles in the tutorial for more details."

4. The right nav bar is blurry when hovering over

While you're moving your mouse over the nav bar, the text get blurry. But as soon as you stop moving, the text clears up.

Interactive tutorials / Instructions

1. During the exercises, the "You got it right!" appears before I can visually confirm my answer in the right panel.

I feel like I'm guessing whether my answer is correct. I could use the visual confirmation to help write the muscle memory. I think CodeAcademy has a good implementation of this where the user asks to verify answer when he/she is ready to check their work.

If the CodeAcademy example doesn't work, could this box be smaller or placed somewhere else, maybe above the two boxes? Or near the "Show the answer" / "Reset" buttons?

A good example is on the hurricane page. I thought there was no space in-between the [1]: and the https in the reference link, but before I could confirm, i got the "you got it right!"

2. I think 03-paragraphs is broken

At the beginning, make note of the right box (answer).

image

but after you hit "Show the answer", the right box (answer) changes!

image

3.Are URLs required to be in < >?

In 05-links, the text says

URLs may not become links in Markdown until enclosed in < and >.

Is this "may" as in optional or don't become links? This is the question I had when I read it.

4. Put Show Generated HTML in a tab?

I'm wondering if the Show Generated HTML / results should each be in a tab, instead of a checkbox at the bottom, to increase usability.

⚠️ Warning: PM UI Mockups ahead ⚠️

image

5. Not a bug

Was this a hint? :)

image

*6. Use +, , and - as list markers

I have trouble understanding what this means. Are these used in conjunction with each other, e.g. does *+ have meaning?

image

7. 10-nestedLists gives correct answers when things aren't 💯 correct

It said this was correct.

image

8. 10-nestedLists doesn't always work

There's something odd with this one. I had to click inside the editor to get it to confirm my answer was correct.

Ending

I was half-expecting "Go forth and Markdown beautiful text!" :)

About translations

Can we translate to other language? There are here in this git a way to add translations?

rename repo for consistency and better cloning

The current repo name, commonmark/web, when cloned, i.e. git clone https://github.com/commonmark/web.git, results in a local repo named "web".

It would be good to rename the CommonMark-site repo too. See issue commonmark/commonmark-spec-web#2.

A couple of suggested options:

current name option 1 (semantic name) option 2 (hosting domain name)
commonmark/web commonmark-web commonmark.org
CommonMark-site commonmark-spec-web spec.commonmark.org

code fence?

Hiya,
Third question of the code section of the tutorial asks user to

format code using the 'code fence' method

I'm proof that someone in your audience is not a coder--yet--and so introducing the term "code fence method" here was confusing to me and may be confusing to others too.

It's a useful term -- so maybe add it into the initial explanation of code blocks in the tutorial then leave it in this third question to reinforce its use? Just an idea.

add page with CommonMark compatible software

A page listing tools and platforms that support CommonMark would...

  1. give users an idea of the breadth of CommonMark support. This will help them decide whether to use it.
  2. help them find the CommonMark supporting tools they need.
  3. help drive adoption of CommonMark.

It could be a simple list like the following, or a table with fields such as software/platform category, version of CommonMark supported, etc.

Anchor links will always be tied to a specific spec version

I realized when linking to the spec, that it'd always will be tied to the specific version that I'm looking at. It'd be great if on the spec listing page when I click on current that the url contains current as well instead of the version number, i.e.

https://spec.commonmark.org/current/#thematic-breaks

vs.

https://spec.commonmark.org/0.29/#thematic-breaks

without issuing the re-direct that breaks the anchor link. I understand that sections may change (though I'd guess this is mostly unlikely with top-level sections), but it'd be great to be able to point to the most up-to-date information when needed.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.