Giter Club home page Giter Club logo

marp-themes's Introduction

Marp Themes

This is an unofficial repository of themes for the Marp (Markdown Presentation) ecosystem. It is not endorsed by the Marp Team in any way. I just like the project and want to share my themes.

Hopefully soon I'll be creating some tutorials on making themes.

Themes

  • umich
    • A theme based off of the University of Michigan's branding requirements. This theme is heavily derived from the beautiful Gaia theme by @yhatt.
    • CDN Link: https://gitcdn.link/repo/m4ttr4ymond/marp-themes/master/themes/umich/css/umich.min.css
    • Features
      • Classes
        • title: A new class for the title page of the slide. There's probably a way to set the first slide to always be the title, but I'm not sure how to do that yet.

Usage

VS Code

  1. Open the settings for the Marp extension

  2. Scroll down to Markdown > Marp: Themes

  3. Click Add Item and enter the CDN for the theme that you want to use

  4. When making your slides, put the associated name in the yaml metadata at the top of your markdown file:

    ---
    theme: <theme_name>
    ---
    
    # Etc

Want to make your own theme?

Great! All you have to do is fork this repo and makes some edits. Or, if you want, you can clone the repo, add a pull request, and I'll add the theme to this repo.

Most of the important content is on the Marp docs. However, there are a few things that weren't entirely clear to me, and I haven't had time to add clarification to the Marp documentation. Hopefully I'll get to it this summer.

Importing Files

According to the Marp Team's policy, local file access is restricted for Marp themes. This means that using local assets is a real pain. Fortunately, we can use a remote CDN for hosting instead. For most files, you should just be able to use the following:

@import url('https://...');

Note that because of their dedication to security, HTTP requests will not work. You have to use HTTPS.

This is usually fine. However, some hosting services won't work as a CDN (probably because of server-side HTTPS settings), which prevents you from loading their hosted assets into your css. Github is the main site you'll run into issues with, but I'm sure there are others. To get around this, you just have to use a service like GitCDN to create a cached CDN version of your raw.githubusercontent.com... link. If you need further instructions on using GitCDN, you can visit their repo here.

According to the repo:

GitCDN works by creating a short-cached (~2 hours cache time) lookup of the latest commit of the specified file, then redirecting you to a long-cached (~1 week cache time on edge servers, and ~1 year cache time on primary servers) version of that file.

This means that GitCDN will lag a bit behind any commits you make, so be careful to make any necessary updates far in advance of when you'll actually need to use the updated file. I suggest designing themes on your local machine using relative filepaths, then creating GitCDN links only when you're finished.

Credits

marp-themes's People

Contributors

m4ttr4ymond avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.