Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Styling a element with several CSS classes #75

Closed
existme opened this issue Sep 29, 2018 · 5 comments · Fixed by #76
Closed

Styling a element with several CSS classes #75

existme opened this issue Sep 29, 2018 · 5 comments · Fixed by #76

Comments

@existme
Copy link

existme commented Sep 29, 2018

Hi,
I am trying to use this in tui.editor within a Gollum installation, I have already written a render layer for Gollum which mimics markdown-it-attrs behaviors. Something that makes me wonder is some inconsistencies when having several classes on an element.

Example input:

1.this is the markdown I'm trying to parse {.note .green}
2.this is the markdown I'm trying to parse {.note.green}

Current output:

<p class="note green">1.this is the markdown I'm trying to parse</p>
<p>2.this is the markdown I'm trying to parse</p>

Expected output:

<p class="note green">1.this is the markdown I'm trying to parse</p>
<p class="note green">2.this is the markdown I'm trying to parse</p>

Won't you agree that both should render the same way? I mean why not allowing the shorthand .warning.green instead of .warning .green? and why it completely eats .note.green?

Thanks
/Reza
@arve0
Copy link
Owner

arve0 commented Sep 29, 2018

Hi, thank you for reporting 🙂
Turns out, . is allowed in class names.

You can try it out with this HTML:

<html lang="en">
<head>
    <style>
    .a\.b {
        color: yellow;
    }
    </style>
</head>
<body>
    <p class="a.b">hello</p>
</body>
</html>

Regarding the output, it is actually

<p class="note green">1.this is the markdown I'm trying to parse</p>
<p css-module="notegreen">2.this is the markdown I'm trying to parse</p>

which seems to be a bug. I'll fix it.

@existme
Copy link
Author

existme commented Sep 29, 2018

Thanks for the really quick feedback. Regarding the output, If you say so, then this is something that tui.editor does on top and eats the css-module sorry for the confusion. But don't you think that it's better to render {.note.green} -> class="note green" and {.note\.green} -> class="note.green".

@arve0
Copy link
Owner

arve0 commented Sep 29, 2018 •
edited
Loading

But don't you think that it's better to render {.note.green} -> class="note green" and {.note.green} -> class="note.green".

I understand why you ask, as .a.b in CSS means "class a and b on same element". Though I see at least three reasons not parse it that way:

  1. Pandoc (that markdown-it-attrs mimics) renders {.with.dot} as class="with.dot".
  2. Markdown is nearer to HTML (<p class="separate with spaces">) then to CSS (.multiple.classes.on.same.element { ... }).
  3. The extra space, {.note .green}, is an explicit communication of "this is two things". For me, explicit > implicit.

@arve0 arve0 mentioned this issue Sep 29, 2018
Merged
@arve0 arve0 closed this as completed in #76 Sep 29, 2018
@existme
Copy link
Author

existme commented Sep 29, 2018

Fair enough 👍 Thanks for the quick feedback, patch and the explanation :)

@arve0
Copy link
Owner

arve0 commented Sep 29, 2018 •
edited
Loading

No problem, fixed in v2.3.2.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

allow dot in class names arve0/markdown-it-attrs
2 participants
@existme @arve0