Git Product home page Git Product logo

Writer's Mark

Easy, safe and flexible markup for user-generated content.

Writer's Mark attempts to thread the needle between the simplicity of markdown and the power of HTML/CSS, while providing security guarantees so that user-generated content can be both safe and flexible at the same time.

Live Demo : https://writers-mark.github.io/demo/

Implementations

Introduction:

In short, it allows you to write like this:

__title__
This is the title

__subtitle__
It's pretty neat

This is a paragraph.

This is another single paragraph. It is
spread over multiple lines, but still renders as a single <p> tag.

__aside__
This paragraph has some special styling applied to it

In this paragraph **spans of words** can be styled

---
para __title__ {font-size: 2em; font-weight: bold;}
para __subtitle__ {font-size: 1.5em;}
para __aside__ {margin-left: 2em;}
span ** {font-weight: bold;}
---

N.B. Styling rules do not have to be embedded within the text itself, they can also be externally provided.

Why?

A text should belong to its author, not to whatever software platform it was authored on. At the same time, we acknowledge that powerful markup languages like LaTeX or HTML/CSS are not particularly welcoming to new users.

The goal of Writer's Mark is to allow authors to write and format text in a way that they fully own, while being straightforward enough that they can just dive in.

Writing

Text

Text is just a collection of paragraphs

This is a paragraph.

This is a longer paragraph. Its text is spread over multiple
lines, but it will behave as if it was written on a single line.



It does not matter how much space there is between paragraphs.

There are two kinds of style rules: Paragraph and span rules. A style is simply a collection of these rules.

Paragraph styles

If a paragraph begins with text matching a paragraph rule by itself on a line, that rule is applied to the paragraph.

some_style
This paragraph has the some_style rule applied to it.
It will be formatted according to its properties as long as some_style is a style rule.

Multiple styles can be applied to a single paragraph:

some_style
some_other_style
This paragraph has the both the some_style and some_other_style rules applied to it.
The rules will be applied in order from top to bottom.

Span rules

If the open sequence of a span rule is present in a paragraph, and the close sequence follows it. Everything in between will have the rule applied.

The *text* of the paragraph.

Writing Styles

Paragraph rules

A paragraph rule looks like this:

para <token> {
  margin: 12px;
  font-family: arial;
  etc...
}

Span rules

A span rule looks like either one of these. In the first flavor, token is used both as the open and close sequence.

span <token> {
  font-weight: bold;
  etc...
}

span <open> [close] {
  font-style: italic;
  property-2: value;
  etc...
}

Container rules

Style can also be applied to the background of a text using a container rule:

cont {
  background-color: lightGrey;
}

FAQ:

What are the properties that I can use?

On paper Writer's Mark supports almost all CSS rules with a few caveats.

  • An App is free to allow or disallow any CSS property it chooses.
  • Any value referencing external resources is disallowed e.g. background: url("http://example.com/img.jpg"); will not work.
  • You cannot use any escape sequence. If you don't know what that means, don't worry about it.
  • Paragraphs are converted into <p> tags, so only properties that work on them can be used.
  • Spans are converted into <span> tags, so only properties that work on them can be used.
  • Containers are almost always <div> tags, so only properties that work on them can be used.

Can I add images to text?

Not at the moment. We might allow something in the future, but it would have to be both secure and writer-friendly.

Can I put url links in the text?

Not at the moment. This is something that is being considered.

Safety

Writer's mark is meant to be safe by default.

  • Arbitrary HTML is not supported.
  • Links, images, or anything using an rxternal resource is not supported.
  • CSS properties are opted-in.

writers-mark's Projects

demo icon demo

Simple demo for writer's mark

writers-mark icon writers-mark

Easy, safe and flexible markup for user-generated content.

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.