Consistent attribute syntax #102
Description
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"}
#myIdin html is theid=myIdfield 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..myClassin html is theclass=myClassfield 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 - 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"}