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

Support the scoped inline style #94

Merged
merged 12 commits into from
Nov 14, 2018
Merged

Support the scoped inline style #94

merged 12 commits into from
Nov 14, 2018

Conversation

yhatt
Copy link
Member

@yhatt yhatt commented Nov 14, 2018

This PR will support the scoped inline style through <style scoped>. It allows scoped property for inline style. User can tweak slide style only in a current page easier. (e.g. title page)

The scoping logic is similar to vue-loader. If the slide page while parsing had the scoped inline style, the unique data attribute would be added to current page. (<section data-marpit-scope-xxxxxxxx="" />)

PostCSS would process to add attribute selector for scoping the style into a current page.

It closes #85.

# <!--fit--> Scoped style
---

<!-- Scoped inline style -->
<style scoped>
h1 {
  color: red;
  font-size: 500%;
  text-align: center;
}
</style>

# Red centered

---

## <!--fit--> :arrow_up: Only in a single page

Traditional inline style

traditional

Scoped inline style

scoped

Exported PDF is here.

ToDo

  • Add docs

@yhatt yhatt merged commit 9ab8e15 into master Nov 14, 2018
@yhatt yhatt deleted the scoped-style branch November 14, 2018 09:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Support <style scoped> to apply inline style to current page
1 participant