Giter Club home page Giter Club logo

spec-md's Introduction

Spec Markdown

Renders Markdown with some additions into an HTML format commonly used for writing technical specification documents. Markdown additions include code syntax highlighting, edit annotations, and the definition of algorithms and grammar productions.

Philosophy

Spec Markdown is first and foremost Markdown. As such, it follows Markdown's philosophy of intending to be as easy to read and easy to write as is feasible.

In order to interoperate with other tools which use Markdown, Spec Markdown tries to add as little additional syntax as possible, instead preferring conventions. This means any documents written with Spec Markdown in mind should render adequately by other Markdown renderers.

To support the rendering additions of Spec Markdown, some features of Markdown may be limited or removed. As an example, Spec Markdown is strict about the order and locations of headers in a document.

Note: This is not a normative spec for Spec Markdown, but just documentation of this tool. Of course, written in Spec Markdown!

Getting Started

To use Spec Markdown, just write Markdown files. There are some conventions used by Spec Markdown which you can read about in Spec additions.

To convert your Markdown files into an HTML spec document, use the spec-md utility.

npm install -g spec-md
spec-md ./path/to/markdown.md > ./path/to/output.html

You can also require spec-md as a node module.

npm install --save-dev spec-md
const fs = require('fs');
const specMarkdown = require('spec-md');
specMarkdown.html('./path/to/markdown.md').then(html => {
  fs.writeFile('./path/to/output.html', html);
});

Spec Markdown also provides utilities for generating and operating on an intermediate representation of the markdown, which you can explore in Using Spec Markdown.

spec-md's People

Contributors

benjie avatar bluepichu avatar dietmarw avatar joelmarcey avatar joshdoug avatar judofyr avatar leebyron avatar lengjing avatar nam-hle avatar ojkelly 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

spec-md's Issues

Handle <pre> tags verbatim, including newlines and whitespace

Given

<pre>
<i>source-unit:</i>
  <i>declaration-list<sub>opt</sub></i>

<i>declaration-list:</i>
  <i>declaration</i>
  <i>declaration-list</i>   <i>declaration</i>

<i>declaration:</i>
  <i>global-constant-declaration</i>
  <i>function-declaration</i>
  <i>class-declaration</i>
  <i>global-type-constant-declaration</i>
  <i>module-declaration</i>
</pre>

the output ends up being

screen shot 2016-10-19 at 7 44 41 am

This gets processed by htmlTag in grammar.pegjs

htmlTag = tag:$('<' '/'? [a-z]+ [^>]* '>') {
  return {
    type: 'HTMLTag',
    tag: tag
  };
}

That doesn't take into account whitespace and newlines, and maybe it shouldn't.

So I tried to create a preTag, but was having trouble with lookaheads, etc.

I tried both:

preTag = tag:$('<pre>' [A-Za-z0-9\:\<\>\/]+ '</pre>') {
  return {
    type: 'PRETag',
    tag: tag
  };
}
preTag = tag:$('<pre>' !(\<\/pre\>).* '</pre>') {
  return {
    type: 'PRETag',
    tag: tag
  };
}

The first one seemed most promising, but the \< gets in the way, which is why I tried a negative lookahead option, but the grammar didn't handle that the way I did it.

Compilation Error: document must begin with a Setext-style header.

$ spec-md ./spec-md/project.md > ./spec-md/project.html
Error: Primary document D:\Windows\Desktop\markdown\spec-md\project.md is missing a title. It must begin with a Setext-style header. Example:

Title of Spec
=============

    at validateDocument (C:\Users\seb\AppData\Roaming\npm\node_modules\spec-md\src\parse.js:111:11)
    at Object.enter (C:\Users\seb\AppData\Roaming\npm\node_modules\spec-md\src\parse.js:90:9)
    at visit (C:\Users\seb\AppData\Roaming\npm\node_modules\spec-md\src\visit.js:95:26)
    at validate (C:\Users\seb\AppData\Roaming\npm\node_modules\spec-md\src\parse.js:87:10)
    at C:\Users\seb\AppData\Roaming\npm\node_modules\spec-md\src\parse.js:13:12

Even a document just containing

Title of Spec
=============

won't compile. Or from the documentation

Spec Markdown
-------------

Introductory paragraph.

# First Section Header

will deliver the same error.

Feature Suggestions

Great work.
I've been looking for a language that supports all sorts of technical documentation (something like sense.io, but doesn't require server side execution).

My suggestions include:

SVGs could be used to support graphs and the like.

Weird scroll bar in pre tags

How the awesome library here :D
I came from GraphQL spec Oct 2021 and saw that the pre tags have scroll bars like this:
image
Compare to the previous spec:
image

Is it the library's intention?

TypeError

spec-md Markdown.md

TypeError: Cannot read property 'value' of null
    at printSidebar (/usr/local/lib/node_modules/spec-md/src/print.js:259:61)
    at printBody (/usr/local/lib/node_modules/spec-md/src/print.js:49:5)
    at print (/usr/local/lib/node_modules/spec-md/src/print.js:14:18)
    at /usr/local/lib/node_modules/spec-md/src/index.js:7:12

Task lists / checkboxes

I can't find any way to make check / task lists work, while they work just fine in other GFM tools.

Is it intended to not support them? Can't they simply be read only or at least ignored (not causing spec-md to fail generating a HTML file)? We are using them extensively in our work-in-progress documentation.

Spec-MD does not operate correctly in Windows

After hacking for a few hours yesterday (initially from the basis of what appeared to be an error in the Setext title code) to try to get the package running in Windows (even with WSL Ubuntu), I got it half-working, but it's clear there are many issues going on that are resulting in failed or incorrect output in Windows.

Steps to reproduce:

  1. Try to parse anything (even basic examples from the repo) in Windows.

Support `::` in references/algorithms

In the GROQ specification we use :: for namespacing: pt::text(โ€ฆ) is a function living under the pt namespace. It seems that spec-md doesn't support this when writing an algorithm (this gives Malformed {reference}):

See {pt::text()}.

pt::text(args):

* Evaluate {args}

Would it be easy to extend the allowed characters inside references?

Should underscores cause parse error in Definition Lists?

G'day!

This should be easy to explain. I have two markdown snippets. This one works and compiles to HTML successfully:

# Test Spec

test
: The word test has no underscore.

But this definition does not:

# Test Spec

test
: The word test_test has an underscore.

The error message is:

Expected "**", "+", "-", "[", "\\", "\n", "\r", "\r\n", "_", [ \t], or [^\n\r+\-{`*_[!<\\] but end of input found.

content/SPONK.md:5:1
4 | : The word test_test has an underscore.
5 | 
    ^

And it's because of the underscore! I guess it is interpreting _ to mean "begin italics"? In any case, this took a while to track down. I am wanting to use spec-md in my team and the error message makes it hard to debug, and hard for beginners.

Many thanks!

LaTeX support solved

Hi @leebyron,

I successfully added full LaTeX support by adding this line in head of rendered HTML:

<script type="text/x-mathjax-config">MathJax.Hub.Config({tex2jax: {inlineMath: [["$","$"]],displayMath: [["$$","$$"]]},messageStyle: "none"});</script><script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

I can now use $ for inline math and $$ for block math.

I wrote simple script that inserts this line in head for me.

Looks like this could be a solution for integrating LaTeX with spec-md. Let me know what you think! ๐Ÿ˜„

Section links don't work correctly

Sample descriptive file

This is a document that describes the desired use of links in a spec-md file.

Document Sections

Sections are extremely useful constructs that can serve as the reference
point of any concept you would care to define.

Document Links

Links may be used within a document to refer to a specific
Section. Github-flavoured markup
supports the idea of internal document references by parsing out the document
section names, and conformant Markdown editors make this easy with
intellisense and the like.

Unfortunately, when emitted as HTML, these links fail to link to the correct
place, since sections are conventionally emitted as sec-Section-Title
instead of simply Section-Title.

Expected/Desired behaviour

When a Markdown author links to
sections, the emitted HTML
<a>nchors should link to the respective sections correctly.

Extraneous commas

When using imports, extra commas show up in the rendered view in newlines.

image

Not sure why this is... please advise

Link to return to top

Awesome work, this project is really neat- we'll be using it to manage one of our staff handbooks and everything is looking beautiful so far. One usability suggestion would be a link at the end of each header to return to the top of the doc.

Brilliant stuff.

Infinite loop when the same Note is used 29 times or more

The algorithm giving unique IDs to Notes (and probably other elements) has a flaw - when the text of the Note is same the ID keeps growing in size, until it reaches 29th repetition, where it gets stuck in infinite loop.

test-files.zip

"Working" output for 28 notes:

<div id="note-3b064" class="spec-note">
<a href="#note-3b064">Note</a>
Note</div>
<div id="note-3b0649" class="spec-note">
<a href="#note-3b0649">Note</a>
Note</div>
<div id="note-3b0649c" class="spec-note">
<a href="#note-3b0649c">Note</a>
Note</div>
<div id="note-3b0649c7" class="spec-note">
<a href="#note-3b0649c7">Note</a>
Note</div>
<div id="note-3b0649c72" class="spec-note">
<a href="#note-3b0649c72">Note</a>
Note</div>
<div id="note-3b0649c726" class="spec-note">
<a href="#note-3b0649c726">Note</a>
Note</div>
<div id="note-3b0649c7265" class="spec-note">
<a href="#note-3b0649c7265">Note</a>
Note</div>
<div id="note-3b0649c72650" class="spec-note">
<a href="#note-3b0649c72650">Note</a>
Note</div>
<div id="note-3b0649c72650c" class="spec-note">
<a href="#note-3b0649c72650c">Note</a>
Note</div>
<div id="note-3b0649c72650c3" class="spec-note">
<a href="#note-3b0649c72650c3">Note</a>
Note</div>
<div id="note-3b0649c72650c31" class="spec-note">
<a href="#note-3b0649c72650c31">Note</a>
Note</div>
<div id="note-3b0649c72650c313" class="spec-note">
<a href="#note-3b0649c72650c313">Note</a>
Note</div>
<div id="note-3b0649c72650c313a" class="spec-note">
<a href="#note-3b0649c72650c313a">Note</a>
Note</div>
<div id="note-3b0649c72650c313a3" class="spec-note">
<a href="#note-3b0649c72650c313a3">Note</a>
Note</div>
<div id="note-3b0649c72650c313a35" class="spec-note">
<a href="#note-3b0649c72650c313a35">Note</a>
Note</div>
<div id="note-3b0649c72650c313a357" class="spec-note">
<a href="#note-3b0649c72650c313a357">Note</a>
Note</div>
<div id="note-3b0649c72650c313a3573" class="spec-note">
<a href="#note-3b0649c72650c313a3573">Note</a>
Note</div>
<div id="note-3b0649c72650c313a35733" class="spec-note">
<a href="#note-3b0649c72650c313a35733">Note</a>
Note</div>
<div id="note-3b0649c72650c313a357338" class="spec-note">
<a href="#note-3b0649c72650c313a357338">Note</a>
Note</div>
<div id="note-3b0649c72650c313a357338d" class="spec-note">
<a href="#note-3b0649c72650c313a357338d">Note</a>
Note</div>
<div id="note-3b0649c72650c313a357338dc" class="spec-note">
<a href="#note-3b0649c72650c313a357338dc">Note</a>
Note</div>
<div id="note-3b0649c72650c313a357338dcd" class="spec-note">
<a href="#note-3b0649c72650c313a357338dcd">Note</a>
Note</div>
<div id="note-3b0649c72650c313a357338dcdf" class="spec-note">
<a href="#note-3b0649c72650c313a357338dcdf">Note</a>
Note</div>
<div id="note-3b0649c72650c313a357338dcdfb" class="spec-note">
<a href="#note-3b0649c72650c313a357338dcdfb">Note</a>
Note</div>
<div id="note-3b0649c72650c313a357338dcdfb6" class="spec-note">
<a href="#note-3b0649c72650c313a357338dcdfb6">Note</a>
Note</div>
<div id="note-3b0649c72650c313a357338dcdfb64" class="spec-note">
<a href="#note-3b0649c72650c313a357338dcdfb64">Note</a>
Note</div>
<div id="note-3b0649c72650c313a357338dcdfb64e" class="spec-note">
<a href="#note-3b0649c72650c313a357338dcdfb64e">Note</a>
Note</div>
<div id="note-3b0649c72650c313a357338dcdfb64ec" class="spec-note">
<a href="#note-3b0649c72650c313a357338dcdfb64ec">Note</a>

TypeError: Cannot read property 'value' of null

Hi,

This tool seems to be very valuable, but I cannot seem to get it working. I have this very simple MD file:

# Introduction

Hello

and the result for executing spec-md index.md > index.html is only the following error:

TypeError: Cannot read property 'value' of null

Can anyone help me?

My node version is v7.7.4.

Permission error when installing

Whithout sudo, npm install -g spec-md

npm WARN checkPermissions Missing write access to /usr/local/lib
/usr/local/lib
โ””โ”€โ”ฌ [email protected] 
  โ””โ”€โ”€ [email protected] 

npm ERR! Linux 4.4.0-78-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "install" "-g" "spec-md"
npm ERR! node v4.2.6
npm ERR! npm  v3.5.2
npm ERR! path /usr/local/lib
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall access

npm ERR! Error: EACCES: permission denied, access '/usr/local/lib'
npm ERR!     at Error (native)
npm ERR!  { [Error: EACCES: permission denied, access '/usr/local/lib']
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path: '/usr/local/lib' }
npm ERR! 
npm ERR! Please try running this command again as root/Administrator.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/user/sandbox/npm-debug.log

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.