Skip to content

Consistent attribute syntax #102

@mofosyne

Description

@mofosyne

This proposal is to ensure consistency in implementing attributes {} as seen in pandoc.

This is the attribute format that is in consensus so far in http://talk.commonmark.org/t/consistent-attribute-syntax:

 {#myId .myClass  key=val key2="val 2"}
  • #myId in html is the id=myId field of a html tag. This is useful for anchors. There will be no uniqueness checking requirements since it's the writers job to pick unique names not CommonMark.
  • .myClass in html is the class=myClass field of a html tag. This is useful for general styling, e.g. syntax highlighting in code fields.
  • key=val key2="val 2" is treated depending on context. Most of the time, it's just appended to the html tag like #myId and .myClass. It can be thought of as the 'settings' of the CommonMark elements. E.g. width and height of embedded videos.

Discussed:

  • json style vs html : What was discussed, is using json like syntax instead of html as inspiration. However json is too verbose with , when does the job just as well in HTML. Plus CommonMark can parse html tags, so it's good to keep some consistency with html (and thus reduce mental switching cost).
  • Uglyness if too many is used : Most people won't need it for everyday writing (except for anchors perhaps). But when they do, it will be a life saver. Thus it's not going to be used everywhere, and thus {} will be visually manageable.

Contentious issue:

There is one objection by chrisalley that { size: 10, duration: 10, cycle: forever } is more readable than { size=10 duration=10 cycle=forever }


Consistent attribute syntax in practice:

Url Links

 [description](url){#myId .myClass  key=val key2="val 2"}

Embedded Media

!mediaType[description](url){#myId .myClass key=val key2="val 2"}
  • assumed to be image if mediaType left blank

  • syntactic sugar ( content of () handled by mediaType handler/extension):

    ![](file.mp4 "video title" 80x10 )
    

    is equivalent to typing:

    !video[](file.mp4){title="video title" width=80 height=10}
    

Extension Directives (For extra extensions!):

@name[content](arg){#myId .myClass key=val key2="val 2"}
  • name :~ extension name

or

@@@name[content](arg){#myId .myClass key=val key2="val 2"}
    >>extension code/content to process here<<
@@@

Code:

`<someCodeHere>`{#myId .myClass key=val key2="val 2"}

Shorthand version:

`<someCodeHere>`myClass 

fenced code:

``````{#myId .myClass  key=val key2="val 2"}
     someFunction();
``````

short hand version:

``````myClass 
     someFunction();
``````

Header:

# HeaderTextHere {#myId .myClass key=val key2="val 2"}

# HeaderTextHere # {#myId .myClass key=val key2="val 2"}

HeaderTextHere 
################## {#myId .myClass key=val key2="val 2"}

HeaderTextHere 
~~~~~~~~~~~~~~~~~~ {#myId .myClass key=val key2="val 2"}

HeaderTextHere 
------------------ {#myId .myClass key=val key2="val 2"}

HeaderTextHere 
================== {#myId .myClass key=val key2="val 2"}

Block styling

This is a paragraph with a little texts.
And more text here.
{#myId .myClass key=val key2="val 2"}

This is a paragraph with a lot of text. That's why it's somewhat hard to make out there is an attribute. {.this-class-is-ignored-and-left-as-it-is-in-text}
{.some-class}

List

Normal list with individual item styling and block styling:

- item one {#myId .myClass key=val key2="val 2"}
- item two {#myId .myClass key=val key2="val 2"}
{#myId .myClass key=val key2="val 2"}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions