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.

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

Operators for class directive #233

Open
yhatt opened this issue May 2, 2020 · 0 comments
Open

Operators for class directive #233

yhatt opened this issue May 2, 2020 · 0 comments
Labels
enhancement New feature or request

Comments

@yhatt
Copy link
Member

yhatt commented May 2, 2020

For now, class directive is just meaning setAttribute('class', 'xxxxxx') so assign the specified value into the slide as is. The problem is removing inherited class unless re-assign the class manually.

When setting the whole of color scheme by class, it may lose the color if changed the layout in a part of slide via _class spot directive.

<!-- The example based on Marp Core -->

<!--
theme: gaia
class: invert
-->

# Invert color

---
<!-- _class: lead -->

# Invert color?

---

# Invert color

The second page has lost invert color.

Proposal

Marpit recognizes + and - prefix in each of class names, and manipulate inherited class based on the operator. Don't require to know the inherited class.

  • <!-- _class: +lead --> adds lead class into the inherited class.
  • <!-- _class: -invert --> removes invert class from the inherited class.

It works on local directives and spot directives.

By this change, the class name beginning from specific operators cannot use in Marpit. Beginning + and - are valid as HTML class but not common because + requires to escape character in CSS definition.

@yhatt yhatt added the enhancement New feature or request label May 2, 2020
@yhatt yhatt added this to the Marpit v2 (modified) milestone Sep 20, 2020
@yhatt yhatt removed this from the Marpit v2 (modified) milestone Mar 25, 2021
jr-k added a commit to jr-k/marpit that referenced this issue Oct 27, 2023
More control over classnames (as described here: marp-team#233).

```js
var class = "invert pink embed"; // => "invert pink embed"
var class = "invert -pink embed"; // => "invert embed"
var class = "invert -pink embed +pink"; // => "invert embed pink"
```
jr-k added a commit to jr-k/marpit that referenced this issue Oct 27, 2023
More control over classnames (as described here: marp-team#233).

```js
var class = "invert pink embed"; // => "invert pink embed"
var class = "invert -pink embed"; // => "invert embed"
var class = "invert -pink embed +pink"; // => "invert embed pink"
```
jr-k added a commit to jr-k/marpit that referenced this issue Oct 27, 2023
More control over classnames (as described here: marp-team#233).

```js
var class = "invert pink embed"; // => "invert pink embed"
var class = "invert -pink embed"; // => "invert embed"
var class = "invert -pink embed +pink"; // => "invert embed pink"
```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
Status: Todo
Development

No branches or pull requests

1 participant