Featured image of post Modify the slide style in HackMD's presentation mode

Modify the slide style in HackMD's presentation mode

📌 Introduction

When you want to change the text color or other CSS properties of a specific page or element in HackMD’s presentation mode, follow these example.

在 HackMD 的簡報模式下想要更改其中一頁的文字顏色或是其他 CSS 屬性時的解決方式。

💻 Code

---
type: slide
title: "Test slide"
---

<style>
    .my-h2 {
        color: blue;
    }
</style>

<!-- .slide: style="background-color: white;" -->

# Title <!-- .element: style="color: red;" -->

## This is the text of the test. <!-- .element: class="my-h2" -->

Item 1 <!-- .element: class="fragment" data-fragment-index="1" -->
Item 2 <!-- .element: class="fragment" data-fragment-index="2" -->
Item 3 <!-- .element: class="fragment" data-fragment-index="3" -->

🗒️ Notes

Change for a single slide: <!-- .slide: style="background-color: white;" -->

Change for a single element: <!-- .element: style="color: red;" --> OR <!-- .element: class="my-class" -->

📖 Ref.

https://hackmd.io/s/slide-example#Fragments