marp presentation font size

Specifying Font Size in Individual Slides using MARP

Abstract: Learn how to set custom font sizes for individual slides in Markdown presentations created using the MARP framework.

Specifying Font Size for Individual Slides using MARP

MARP ( M arkdown A rt R ender P resentation) is a popular tool that allows you to create beautiful slides using Markdown. With MARP, you can easily customize the look and feel of your slides, including the font size. In this article, we will focus on how to specify font size for individual slides in MARP.

Key Concepts

Slide: A single page in a MARP presentation.

Font size: The size of the text on a slide.

MARP theme: A pre-defined set of styles that can be applied to a MARP presentation.

How to Specify Font Size for Individual Slides

By default, MARP uses the font size specified in the theme you have chosen. However, you can override this font size for individual slides by using the --font-size option. Here's an example:

In this example, we have specified a font size of 32px for the slide using the --font-size option. You can specify any font size you want, just make sure to use the correct syntax (e.g., 16px , 24pt , etc.).

Using Different Font Sizes on the Same Slide

You can also use different font sizes on the same slide. To do this, you can use the h1 , h2 , h3 , etc. headers, which automatically adjust the font size. Here's an example:

In this example, we have used the h1 and h2 headers to create a slide with different font sizes. The h1 header has a larger font size, while the h2 header has a smaller font size.

Using Custom Font Sizes

If you want to use a custom font size that is not available in the theme, you can use the style option. Here's an example:

In this example, we have used the style option to create a custom font size of 28px for the slide. You can use any valid CSS font size value, such as 16px , 24pt , etc.

• MARP allows you to specify font size for individual slides using the --font-size option.
• You can use different font sizes on the same slide by using the h1 , h2 , h3 , etc. headers.
• You can use custom font sizes by using the style option.
• MARP Homepage
• MARP Configuration
• CSS Font Size

Tags: :  MARP Markdown Presentations Font Size

Latest news

• Exposing Immi-Cloud Flare Tunnel: A DS-Lite Workaround
• Understanding Isabelle's Session Incompleteness in AFP-2019
• ASP.NET Core Site Won't Start: Unable to Resolve Database Context Despite Added Services
• Google Workspace Account Sending Errors: 'Service Invoked Many Times...' with 20-30 Emails
• Error with Shadcn/radix: Expected a single React element child, but received an array
• Determining Length Lines: Centroid Objects and Roughness Measurements
• Automating MOD File Builds with Gfortran: Specifying Clean Targets
• Connecting Android to Wireguard VPN: A Step-by-Step Guide
• Using Map Prometheus Datasource Variable Value as Metric
• Creating a Dynamic To-Do Scheduler with User Input and Real-Time Start Times in VBA
• Verifying Sequence of Time with JavaScript and Selenium
• Understanding the SQL Query Behind Saved Views in SQL Server Management Studio
• Setting up GUI for RHEL 9 on Azure: A Step-by-Step Guide for TeamIDEA
• Correcting Mistakes with Flutter: Provider, FutureBuilder, and addItemProvider
• Clustering Small Datasets: One-Parameter Solution for Morphological Analysis in Aspect Ratio Caudal Fin Studies
• Persistent Notarization Issues with macOS Electron Applications
• Threat Detection: Analyzing Sysmon.csv Logs with Sigma Rules
• Resolving [WinError11057] Error in Socket Python
• Populating Code Field in VS2022 Error List using VSExtension: A Step-by-Step Guide
• Resolving Ambiguity in std::vector::insert with Different Overloads
• Fast Index Mapping Two Numpy Arrays with Duplicate Values
• Setting up Local File Storage in OpenWhisk using YAML files with MicroK8s
• Playwright Testing Toolbar Missing in Visual Studio Code
• Unable to Use Object Layer in Tiled Map with Python Arcade
• Sending Results Back from Spark Workers in a Kubernetes Cluster
• Rendering Data from One Node.js File to Another (.ejs) - Newbie Developer's Guide
• Setting Name Order for Input/Output Tensors: Converting TensorFlow Model to tFLite
• Mapbox Optimization v2: Unexpected Shipment Distribution Based on Vehicle Capabilities
• Setting Callback for Bokeh Autocomplete Input Slider Trigger in Software Development
• Resolving ActiveCell Issue with ActiveCommandManager in SpreadsheetGear 9.2.x
• Splitting a DataFrame with Student Numbers into Multiple DataFrames
• System Identification using ARX model in Gekko
• Setting up Pino Transport Streams with Next.js and Webpack
• Java: Replace Template Values in Strings using Lightweight Regex
• Building a Speech Recognition App with Live Stream Audio in Ruby on Rails

DEV Community

Posted on Mar 27, 2023 • Originally published at chris-ayers.com on Mar 26, 2023

Marp - Create Presentations with Markdown

Marp: create presentations with markdown.

Marp is a powerful and user-friendly presentation framework that simplifies the process of creating visually appealing slide decks using Markdown. In this blog post, we’ll explore what Marp is, why you might want to use it, how to get started. I’ll share my process and show you how you can automate hosting your presentations on GitHub Pages using GitHub Actions.

What is Marp?

Marp is an open-source presentation framework that allows you to create beautiful, customizable slide decks using the simplicity and flexibility of Markdown. By harnessing the power of Markdown, Marp enables you to focus on your content and message without getting bogged down in complex formatting and design choices. Marp has CLI and VS Code extensions, and it supports exporting presentations to various formats, including HTML, PDF, and PowerPoint.

Why Use Marp?

There are several reasons why you might want to consider using Marp for your presentations:

• Simplicity: Marp allows you to write your presentations in plain text using the intuitive Markdown syntax, which is easy to learn and use.
• Focus on content: With Marp, you can concentrate on your message and content without worrying about complex formatting and design choices.
• Customizable: Marp offers a range of customization options, allowing you to create presentations that align with your personal style and preferences.
• Integration with Visual Studio Code: Marp seamlessly integrates with the popular Visual Studio Code editor, providing real-time previews and a smooth workflow for creating and editing presentations.

Working with Marp

For me, the ideal way to interact and work with Marp is through the Marp for VS Code extension . This extension provides a seamless workflow for creating and editing presentations in Visual Studio Code. It also offers real-time previews, allowing you to see your presentation as you write it.

To get started, install the Marp for VS Code extension and open a new Markdown file. You can then start writing your presentation. A sample presentation is shown below:

Once you’ve added the content to VSCode with Marp, your presentation will look like this:

Official Themes and Resources

Marp comes with a few built-in themes that you can use as a starting point for your custom themes or as inspiration for your own designs. You can also refer to the Marpit documentation for more information on styling Marp presentations. There is good documentation on image sizing and positioning on the Marp website.

GitHub Pages and Marp

I have created a GitHub repo for each of my talks. For each talk, I have a slides folder that contains the Markdown files for the presentation. All images are stored in slides/img . I use GitHub Pages to host the HTML files, which allows me to share the presentation with others. I use a GitHub Actions workflow that automatically builds and publishes the presentation to GitHub Pages whenever I push changes to the slides folder. This workflow is shown below:

Marp Template

I’ve created a marp-slides-template , which provides a minimal template to create a Marp site that can be built and published on GitHub Pages. This template comes with a GitHub Pages / Actions workflow, allowing you to easily build and publish your Marp presentation on GitHub Pages. With this template, you can quickly create and customize your presentation, preview it in Visual Studio Code using the Marp extension, and then share it with the world by publishing it to GitHub Pages. You can use the template by clicking on the link or visiting the repo and clicking on the “Use this template” button.

Marp is a powerful, flexible, and user-friendly presentation framework that simplifies the process of creating visually appealing slide decks. By harnessing the simplicity of Markdown and offering a range of customization options, Marp enables you to focus on your content and message without getting bogged down in complex formatting and design choices. With its seamless integration into Visual Studio Code and various export options, Marp is an excellent choice for anyone looking to streamline their presentation creation process. Check out the official documentation and repositories to get started on creating your next presentation with Marp today.

Some of my Marp Presentations

• Feature Flags
• GitHub Actions Demos
• Secure Terraform on Azure
• Build with Bicep
• Dotnet Configuration in Depth
• Dev Containers

Official Repos and Docs

For more information on Marp and to dive deeper into its features and capabilities, check out the following resources:

CommonMark markdown syntax: https://commonmark.org/help/

Marp Official Repository: https://github.com/marp-team/marp

Marp Official Documentation: https://marpit.marp.app/markdown

Marp for VS Code Documentation: https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode

Top comments (2)

Templates let you quickly answer FAQs or store snippets for re-use.

• Joined Apr 19, 2023

Wow, this is the first time I've seen this way of creating presentations! It's really interesting and unusual, and I'm definitely intrigued by the idea of using Marp to create my next presentation. I'm used to using other tools where there are worksheet templates on the website that I can use to quickly create well-designed slides. I'm particularly intrigued by the idea of using Marp to create my presentation content since I'm already familiar with that syntax from my coding work. I'm really excited to give Marp a try and see how it works for me. Thanks for sharing this article and introducing me to this new tool!

• Joined Apr 24, 2023

I'm not sure how simple it is to use, especially with so many other simple presentation tools out there. I would like to know more about how Marp works and how it can help me create better presentations.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

Hooks do Ciclo de Vida do Angular: Uma Visão Geral

Ruan Gabriel - Aug 14

Implementing a Doubly Linked List

Terrence Jung - Aug 14

Mejora tu productividad de código con GitHub Copilot

Vanessa Aristizabal - Aug 14

Speaking at a Tech Event for the First Time: My Experience

Shivam Katare - Aug 14

We're a place where coders share, stay up-to-date and grow their careers.

Chris Ayers

I am a father , nerd , gamer , and speaker .

• Custom Social Profile Link
• Unleash Your Creativity with Marp Presentation Customization

6 minute read

This is part 2 of the MARP series. You can read the series of articles here:

• Marp - Create Presentations with Markdown

Introduction

Marp is a powerful Markdown presentation framework that enables you to create stunning slides effortlessly. By using simple text-based formatting, you can easily customize your presentations to suit your unique needs and style. Although Marp provides built-in themes and configurations, the true potential of this framework can be realized by customizing your presentations to suit your unique needs and style. In this blog post, we will delve into some of the key customization options available in Marp and guide you through the process of creating a truly standout presentation.

Built-in Themes

Marp comes with three built-in themes that you can use to get started. The three themes, Default, Gaia, and Uncover, are shown below along with the frontmatter to use them and a few inverted examples.

Default Theme

Default - normal.

Default - Inverted

Gaia Normal

Gaia - Lead / Invert

Uncover Normal

Directives are commands that you can use to customize your slides. They allow you to control the appearance, layout, and behavior of your presentation. Many of the directives apply globally to the entire presentation, but some are local and only apply to the current slide. A few of the directives include:

• backgroundColor

To learn more about the directives and see more examples, check out the Marp documentation .

Custom Themes

Marp’s built-in themes serve as an excellent starting point. In the marp-slides-template repository, we demonstrate how you can extend a theme. Let’s take a look at the CSS file, custom-default.css :

The crucial aspect for the Marp theme engine is the theme directive: @theme custom-default . This theme name is what you’ll use in your slides. To link it to your Markdown file, apply the theme option in the front matter:

In your CSS file, override or extend Marp’s default styles to craft your unique appearance. For instance, you can modify the background color, font, or slide transitions. For a comprehensive list of available style properties, refer to the Marp documentation: https://marpit.marp.app/theme-css .

Backgrounds and Images

Backgrounds.

Adding custom backgrounds and images can make your presentation more engaging and visually appealing. To add a background image to a specific slide, use the following syntax:

You can also use keywords to control how the background shows up. For instance, you can you left or right:

Another option is to specify a percentage, like if you wanted the image to only take up a smaller percentage.

There are also a bunch of filters that you can apply to your images to get various styles, like grayscale, sepia, blur, and opacity.

These filters apply to not only backgrounds, but regular images. You can also combine them.

You can also add background colors and gradients using CSS.

Another thing I’ve done is add inline CSS to my slides. I’ve also enabled HTML tags in my slides, so I can use divs and classes besides the standard Markdown syntax. To do this, you can use the following syntax in your frontmatter.

We can then use these classes in our slides and mix and match Markdown and HTML if needed.

In this example, I’m adding a grid layout to my slides so I have have split columns. You can add any CSS you want here.

• Font Awesome

Font Awesome is a great resource for designers, developers, and content creators who want to add visual elements to their projects without having to create them from scratch. Font Awesome provides a library of over 2,000 free icons that you can use to enhance your presentations.

To do this, you can use the following syntax in your frontmatter to import and style icons.

And then in your slides, you can use the following syntax to add icons.

Mermaid Support

Marp also supports Mermaid , a JavaScript library for generating diagrams and flowcharts from text. Mermaid provides an easy way to create visual representations of complex ideas and concepts, and it integrates seamlessly with Markdown syntax.

To use Mermaid diagrams in your Marp presentation, you need to add the following script to your Markdown file:

You can then create Mermaid diagrams using the div element with the mermaid class. For example:

Marp will automatically convert this code into a diagram, which you can then style using CSS. By default, Mermaid diagrams are quite small, but you can adjust their size using CSS. This CSS code will make your Mermaid diagrams larger and easier to read. You can add this code to the frontmatter section of your Markdown file.

And we get the following:

Note that out of the box, VS Code doesn’t support Mermaid diagrams with a preview, but you can add this feature using the Markdown Preview Mermaid Support extension. This extension adds support for Mermaid diagrams in the preview pane of VS Code.

Speaker Mode

Marp comes with a built-in speaker mode that allows presenters to view their notes and upcoming slides while giving a presentation. To enable speaker mode:

• Export your presentation to HTML (you can also use my template and leverage GitHub Pages).
• Open your Marp presentation file in your browser.
• Press “P” on your keyboard or click on the icon for speaker mode.

• A new window will open, displaying the current slide, next slide, and speaker notes.

Adding Speaker Notes

To add speaker notes to your Marp slides, use the following syntax:

This will create a hidden area for your speaker notes, which will be visible only in speaker mode. You can also export them to PowerPoints and PDF.

In conclusion, Marp is a powerful and flexible presentation tool that can help you create stunning slides with ease. Unlike traditional presentation tools like PowerPoint, Marp uses Markdown, a lightweight markup language that allows you to focus on your content without getting bogged down in formatting details. With Marp, you can easily customize your presentations with custom themes, images, CSS, and other features, making your slides truly stand out. Additionally, Marp is free and open-source, so you don’t have to worry about licensing fees or vendor lock-in. Overall, Marp is a fantastic alternative to traditional presentation tools, and we encourage you to give it a try!

Get started today by using the Marp Slides Template to create your own Marp presentation!

• Marp Slides Template
• Marp Documentation
• Mermaid Documentation
• Markdown Preview Mermaid Support Extension

You may also enjoy

Writing Regex with Copilot

3 minute read

I had a real world example today that I wanted to share about copilot helping me with a coding problem. A friend reached out asking if I knew regex. Its been...

Containerizing .NET - Part 2 - Considerations

10 minute read

This is part 2 of the Containerizing .NET series. You can read the series of articles here: Containerizing .NET: Part 1 - A Guide to Containerizing .NE...

Dev Containers - Part 1

8 minute read

This article is part of the Festive Tech Calendar 2023. For more articles in the series by other authors, visit https://festivetechcalendar.com/. Dev ...

Containerizing .NET - Part 1

7 minute read

This article is part of C# Advent 2023. For more articles in the series by other authors, visit https://www.csadvent.christmas/. This is the first in ...

Creating Presentations In Markdown With Marp

Marp or Markdown Presentation Ecosystem is a collection of tools that allows the generation of presentations of different formats from a markdown template. The tools are written in JavaScript and have a number of options that allow presentations of different styles and formats.

I've spent many hours fiddling with presentations in Keynote and Google Slides, so I wanted something that would be simple to use and generate the presentation files I needed.

Project Setup

Getting set up with Marp is pretty easy. Assuming you have npm installed you can initialise a project and get the marp-cli package installed in just two steps. This allows you to create one or more presentations file formats from a markdown file using the command line.

You should then create some directories for the input and output of files. I normally create a "dist" directory for the presentation files and a "src" directory for my markdown files. The slides file is kept in src and is called "slides.md".

The normal structure of a Marp project that I use to generate presentations is like this.

Front-matter

The front-matter section is a special area at the top of your slides that you can detail a few items for your presentation as a set of YAML data. This includes things like the theme to use, the option to add pagination, the header and footer to include on every page, and the size of the presentation format.

The theme can be set to one of "default", "gia" or "uncover". Each theme can be given one or more class attributes to change the theme in some way. The following sets the default theme, but also adds an "invert" class to invert the colours on the theme.

There's lots more information about themes and how to use them in the marp-core theme documentation .

With the front-matter in place it's now time to look at how to generate slides. Each slide is separated from the previous slide with three slashes (---) on a single line, but after that it's pretty standard markdown.

To create a sub bullet just indent one of the bullets by two spaces.

Images can also be added quite easily to your slides using the image syntax. To add a file called image.png to your slide just add it to the same directory as your markdown file and add the following to your slide.

There are a lot more meta information available for image, so it's a good idea to read through the Marp image syntax documentation page to see what's available.

Preview Slides In Visual Studio Code

This preview tool helps immensely when creating slides as it gives instant feedback on how your slides will turn out. I have found that the preview in VS Code is exactly how the slides will turn out when generated.

To install the extension, open up VS Code and search the extensions for "Marp for VS Code".

You should see something like this when writing your slides.

Once you are happy with how your slides look it's time to generate the files.

Creating The Presentation Files

To generate a HTML presentation just run the "npx marp" command, passing in the output and input directories. If you have used local images in your presentation then you also need to add the "--allow-local-files" flag.

If you want more information about why this is a security feature enabled by default see this page on local file security in Marp .

To generate a PDF of the presentation just include the --pdf flag.

And use the --pptx flag to generate a Powerpoint format file.

Note that although the powerpoint format file works, it isn't a normal presentation. Each slide is actually a screenshot of the slide, set as a background image. You can generate the file if that's a requirement of your presentation, but just be warned that you can change anything in the presentation.

We can simplify the use of the output and input directories by injecting some configuration into the package.json file. The "marp" section below informs Marp about the input and output directories and allows local files to be used within the presentation itself.

Here are a few sites that might help you get started with Marp.

I haven't gone into a great deal of detail with regards to generating the slides in this article, but the basic syntax is very simple (it's just markdown after all). There are also a number of directives available that can change slides, all of which are documented on the Marp documentation site .

If you are interested, I have created a Marp presentation template that I use to easily setup new presentations and generate files in different formats. This is based on a Marp template repository created by Peter Fisher , who originally told me about the Marp project. Thanks Peter!

Add new comment

Related content, brennan helix cd player and ripper: a review, lily58 r2g mechanical keyboard, that time i dropped the production database.

I was reminded recently about how a GitLab engineer managed to delete the prod database , and that got me thinking about one of my biggest (production) mistakes.

RoMac Plus FauxMax Macropad Kit From Mechboards

Eight rules of local website development setup, avoiding customer frustrations with website contact forms.

Having a web presence is essential for all businesses, and if the website contains a contact form then it is essential that it correctly sends contacts to that business. Contact forms are useful as it allows users to easily contact you directly through your website.

Presentations as code thanks to Marp

I have spent years dodging Powerpoint, with limited success. Whether it was me that was expected to deliver the presentation, or people imploring me to automate the creation of their slide decks, I hated few things more in day to day. What really pissed me off was the feeling that it really didn't need to be this hard. Why do I need to click click click, why can't I just write some code? I thought I'd try out some modern tools that aim to address exactly this problem.

I actually found a meetup event named Making slides with reStructuredText which I attended (shoutout to CamPUG , they're a friendly bunch). I tend to prefer Markdown but the talk got me thinking as most of the ideas could be applied to both and helped me define my requirements as a starting point.

What I was hoping to develop was a workflow for creating simple slide decks from my editor. I don't have to present all that often, and when I do, I'm not really interested in animations and fancy transition effects. I just want to be able open my editor and knock out a dozen of so static slides in minutes and be able to leverage most of the features of Markdown. That is, text (obviously), lists, tables, embedded images and crucially, syntax highlighting of code blocks.

While HTML output might be nice, my key requirement is to able to be able to automatically create a PDF version of my presentation. One of the things I took away from the talk I attended is how robust PDFs are for presenting static slide decks. There's no need to worry about browser compatibility issues (even if these have mostly gone away these days) and pretty much any PDF viewer will have a presentation display mode. Sure, this precludes use of animations but, realistically, this is something I won't use 99% of the time.

Being able to add the build step to a CI tool would be the icing on the cake. If you did loads of presentations, and were likely to re-use them, how cool would it be to store the text in a git repository and be able to update them and re-produce them seamlessly?! Again, this probably isn't going to be super important for me (but would be fun to play with).

Tools Considered

I did a little bit of digging and, thanks to the awesomeness of the open source community, there are dozens of different tools that I could use. A few that caught my eye after a cursory search were:

• Pandoc - a versatile document coverter written in Haskell which supports multiple different markup and output formats
• reveal.js - a fully fledged js framework for creating really slick HTML slides that supports Markdown and lots more
• landslide - a tool written in Python for turning Markdown (and rST etc) into HTML
• Marp - a dedicated Markdown converter geared towards slide creation with an intuitive vscode extension

Of the above, Pandoc looks extremely useful but I was leaning towards a tool more focused on creating presentations specifically. Meanwhile, reveal.js was geared to creating fancy presentations in HTML but just seemed like overkill for my use case. I did play around with Landslide, which has the appeal of being written in Python, and it worked just fine but when I tried Marp, via the vscode plugin , I was hooked.

There are no doubt ways of achieving something similar with other tools, but the ability to type Markdown in an editor pane and have it renderred as slides in the preview pane, was exactly the experience I was looking for. Ideally, with this workflow, I would be able to knock out a simple slide deck in minutes and produce a PDF that I can present just about anywhere.

Getting Started with Marp

By installing the vscode extension, I was up and running in seconds. Of course I know that everyone uses different editors but the extension I'm using just builds on the Marp framework and there's no reason one can't use different tools within the ecosystem to produce slides in the same way. That said, having the preview pane in my editor is the perfect workflow for me. I can write my slides and see the result in real time.

Creating a simple slide deck is easy. All you need to do is create a Markdown file and add a front matter section with the following:

The only other thing to understand, beyond a knowledge of Markdown, is that a new slide is indicated using a "ruler" --- . So we could create a simple title slide and and a few more pages with something like this:

Syntax Highlighting

As I mentioned above, this is a key benefit for me. When giving technical presentations, it's quite common to want to be able to show some code, and while I will often drop to my editor to demo things live, it's nice to be able to produce a slide deck with some readable code examples included. Using Markdown to create your slides means you get this for free.

This is all getting a bit meta but, given that I'm writing this blog post in Markdown, it's difficult to illustrate but Marp will render a code block prefixed with three backticks and a language just as you would expect. That is, the following Python code will look appear highlighted according to the theme you're using.

Marp comes with a few themes built in but creating your own seems well documented . For my use so far, I've been happy with the default theme but if I wanted to switch to the gaia theme I would simply specify this in the front matter section of my file:

It's also possible to override the CSS of a theme using the <style> tag and enclosing your custom style. By default it will apply changes globally (i.e. to all slides) but if you use <style scoped> , it will only effect the slide it's added to. For example, the following can be added to a slide's markdown to change the rendering of the emp (i.e. text enclosed in ** in Markdown) tag:

Using directives

Directives are extensions to the Markdown syntax that Marp provides that allow you to specify desired outwith standard Markdown. In fact theme is simply a directive. They can be used in a number of different ways. For example, rather than setting the theme key in the front matter as above, we can use the following directive to change the theme globally:

Another directive let's you add pagination to slides. Again this can either be specified in the front matter:

Or, alternatively, you can add the directive inline:

Using the directive inline allows you to specify that it should only take effect from the page it is added to onwards, or until it is overwritten by another inline directive

You can further restrict the scope of a directive by prefixing it with an underscore:

The snippet above could be used to add a page number to the current slide only (although I'm not sure why you would necessarily want to do that). Other directives are available and provide other functionality that is relevant in the context of presentations such as adding headers as footers to slides.

Of course at some point you're likely to want to add an image or two to your presentation. Marp extends the Markdown syntax to make this a bit easier. I still found this a bit of pain (but then I find embedding images neatly into anything a bit fiddly). Basic usage would be something like this:

Image can be scaled using width and height (or shorthand equivalents):

You can also apply css filters with Marp. To be honest, not being a full time web developer, I didn't even know these things existed until today but I can see how some might be useful. For example, converting images to greyscale might be useful if colours aren't displaying properly for whatever reason:

You can also use the bg keyword to set an image as the background for a slide. You can also use as many keywords as you like in combination. For example, this would set the slide background image and also set the opacity to 20% and blur the image somewhat. Something like this could be really useful for creating a cover slide or adding logos or watermarks to slides.

In the Marp docs there is mention of an advanced backgrounds (experimental at the time of writing) which offers support for using multiple images and splitting backgrounds. The standard functionality is all I see myself needing, at least at this stage.

Rendering a presentation

If you are using the vscode extension, and just want to produce a pdf on an ad hoc basis, you can simply click a button and export a pdf. I produced the following presentation doing exactly that:

Still, there's a lot more power and flexibility you can unlock if you use the Marp CLI package. You can install from npm or simply (and my preferred method) execute directly from npm using npx:

You'll note that I've used a flag to specify that I want to render as a pdf. HTML is the default and the Marp CLI can also output presentations in Powerpoint format and more. The CLI offers further options for customising your output. It would trivial to wrap your desired options in a simple Makefile or even to use Marp as part of a CI pipeline. I note that someone has created a Github action that can output a presentation to a Github pages which seems interesting...

What's missing?

As much as I find it hard to empathise with them, I'm sure there are Powerpoint and Prezi experts out there that would be horrified at the list of things they can't do. As much as super slick animated presentations can look really cool, they're not something I really aspire to being able to create. Partly because I'm lazy and devoid of artistic talent, but also because I feel these things are often a distraction or a massive waste of time.

There is one thing I hoped would work out of the box that didn't and that is being able to embed Mermaid charts. This would make Marp perfect for my needs but the good news is that there are ways of making it work, with a little bit of effort. This issue thread outlines some workarounds and also hints that this functionality could be added via plugin. That's right, Marp has a plugin architecture, one that I haven't really explored but that makes me excited at the possibilities!

Marp Basic Example

Marp Basic Example

Marp is the ecosystem to write your presentation with plain Markdown. https://marp.app/

Updated at 2019-09-16: Renew contents to match to Marp Next instead of the outdated Marp desktop app. https://gist.github.com/yhatt/a7d33a306a87ff634df7bb96aab058b5

Yuki Hattori

More decks by yuki hattori.

Other Decks in Technology

Marp Markdown presentation ecosystem by Marp Team (@marp-team)

Features write slide deck with plain markdown (commonmark) built on, how to write slides split pages by horizontal ruler (e.g., directives marp has extended syntax called "directives" to support creating, global directives theme : choose theme size : choose slide, local directives these are the setting value per slide pages., spot directives local directives would apply to defined page and, example this page is using invert color scheme defined in, image syntax you can resize image size and apply filters, background image you can set background image for a slide, multiple backgrounds (marpit's advanced backgrounds) marp can use multiple background, split background marp can use deckset style split background(s). make, fragmented list marp will parse a list with asterisk marker, math typesetting (only for marp core) katex math typesetting such, auto-scaling (only for marp core) several built-in themes are supported, auto-fitting header (only for marp core) is available by annotating, theme css marp uses <section> as the container of each, tweak style in markdown <style> tag in markdown will work, scoped style if you want one-shot styling for current page,, enjoy writing slides marp: markdown presentation ecosystem — https://marp.app/ by.

Marp×Cursor(Claude)でスライドと台本作成をAIに任せる

AIVtuberシロハナちゃん の開発プロデュースをしている yuki です。

この記事では MarpというMarkdownでプレゼンテーションスライドを作成することができるツールと、AI搭載のエディタであるCursorを使ってサクッとスライドを作成する方法を紹介 していきます。

この方法では シンプルなスライドをプロンプト送信するだけで作成することができます 。 以下が実際に作成されたスライド例です。

今回使用するツールは以下から詳細確認できます。

また、この記事ではスライド作成するまでの紹介ですが、以下の動画では、 AI活用したスライド作成＋AIキャラによるプレゼン発表まで一通りを紹介 しています。

※この記事は2024/08/04時点のものなので今後変更があるかもしれないですのでご了承ください

Cursorでプロンプトを送信してMarkdownコードを生成

まずは .mdファイルを作成 します。

次にそのファイルで CurosorにてClaude 3.5 Sonnetを選択して以下プロンプトを送信 します。 ※スライド枚数や内容は適宜変更してください ※他AIモデルでもできますがClaudeが一番安定している気がします

そして生成されたMarkdownコードを上記のようにそのままファイルに記載して保存します。

ちなみに生成されたコードは以下。

プレビューを確認してエクスポート

コード記載できたらエディタの右上のプレビューアイコンがあるのでクリックしてプレビューを確認します。

ここで内容やデザインに問題ないかを確認します。 修正したい場合はClaudeに修正内容を指示して再度コードを修正してもらうなどすればOK です。

そしてエクスポートもできるのでしてみましょう。 先ほどのプレビューボタンの右隣にあるMarpのアイコンを押下して、Export Slide…をクリックします。

そうすると、 PDF、HTML、PPTX、画像形式で保存 できます。 用途に合わせてダウンロードしてもらえればと思いますが、 おすすめはHTML形式 です。以下のようなのがブラウザで操作できます。

読み上げ台本も生成してもらう

最後に作成したスライドをもとに読み上げの台本も生成してもらいましょう。 これは先ほどのCursorのチャットで 「先ほどのスライド内容をもとに1枚ごとの読み上げ台本を生成してください」 のようなプロンプトを送信すればOKです。

先ほどのスライドをもとに生成された台本は以下です。

シンプルなデザインですが、プロンプトをもとにスライド生成から読み上げ台本までできるのは良いですね。

簡単なMTGやLT会など、共有したい内容を簡単に綺麗にまとめて伝えたいときなどに有用な気がします。 しかも基本的に無料で使えますし。

この記事の内容の延長として、ZoomでAIキャラが生成されたMarpスライドの内容をもとにプレゼン発表までやってみるという流れを以下の動画でまとめているので気になる方はぜひご視聴ください。

以上、ぜひ使ってみてね。

この記事が参加している募集

ご支援は活動費に使わせていただきます

• Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers
• Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand
• OverflowAI GenAI features for Teams
• OverflowAPI Train & fine-tune LLMs
• Labs The future of collective knowledge sharing
• About the company Visit the blog

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Get early access and see previews of new features.

Get Marp to center some content horizontally and vertically

I am using Marp which is a tool to create presentations in markdown and convert it into pdf. On the first slide I have some content such as this:

All of this is top center aligned. What I would want is that the text to be middle aligned(vertically and horizontally) and the image to be bottom right aligned. I couldn't find much about it in the Marp documentation. I am hoping someone with better css know how could help! Believe me, I searched for over 2 hours on this, but my lack of css skills is getting me nowhere.

4 Answers 4

Tested this today and it worked:

Source: https://github.com/marp-team/marpit/issues/141

There are three options:

1. Make the image part of the background. It sounds like you are trying to put a logo on the slide in the bottom right. In this case, if it is to be on most slides - just create a new background with the image in the bottom right. Then set the image as the slides' background, using the bg keyword in the alt-text box:

2. Create an image background and offset it. (Perhaps less applicable for a 'logo in the corner' effect put works well for other images). Insert the image and use the bg keyword in the alt-text box, along with the either right or left .

This can be further customised with percentages - adjusting how much of the slide is given over to the background image.

The image can also be scaled with an additional percentage. The example below sets 40% of the slide on the right-hand side over the background, and the image is then scaled to 80% of it's original size.

3. Use the footer directive and adjust the css to suit. This allows for great flexibility of sizing and positioning of the image.

Use Marp's footer directive , and include the image link within that. This can be applied globally or locally to individual slides (as in the example below).

Then you can change the css to customise the size an position of the image. This can be done through a theme css or via the markdown text with tags (as below).

• Late addition to the 3rd solution: if you want multiple images with various heights to be vertically aligned (centered on the middle of the line), use: <style>footer { height: 100px; text-align: right; } footer img { vertical-align: middle; }</style> <!-- _footer: ' ' --> –  iNyar Commented Aug 10, 2021 at 20:37
• In way 3, float: right seems to be ignored for me. (With whatever the latest version is, via vscode.) –  mcabbott Commented Feb 1, 2022 at 19:20

Try something like this :

where x is your width in %

Source (french) : https://www.unixmail.fr/informatique/presentation-avec-marp/

• 3 This does not work now. –  Nicole Naumann Commented Feb 5, 2023 at 21:59
• This doesn't work. Neither for png nor for svg. –  mefiX Commented Nov 14, 2023 at 12:08

Try float right inline style:

• Did that. But it changed nothing. –  user1720897 Commented Nov 10, 2017 at 6:23

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Sign up or log in

Post as a guest.

Required, but never shown

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy .

Not the answer you're looking for? Browse other questions tagged html css markdown marp or ask your own question .

• The Overflow Blog
• Scaling systems to manage all the metadata ABOUT the data
• Navigating cities of code with Norris Numbers
• Featured on Meta
• We've made changes to our Terms of Service & Privacy Policy - July 2024
• Bringing clarity to status tag usage on meta sites
• Tag hover experiment wrap-up and next steps

Hot Network Questions

• What is the airspeed record for a helicopter flying backwards?
• Would it be possible for humans to be alive to witness the beginning of a runaway greenhouse effect on Earth?
• Why are extremally disconnected spaces so hard to give examples of?
• Are there rules of when there is linking-sound compound words?
• How can I obscure branding on the side of a pure white ceramic sink?
• In "Take [action]. When you do, [effect]", is the action a cost or an instruction?
• "Heads cut off" or "souls cut off" in Rev 20:4?
• Why didn't Walter White choose to work at Gray Matter instead of becoming a drug lord in Breaking Bad?
• When would it be legal to ask back (parts of) the salary?
• Why does the Nicene Creed not use the attribute ' consubstantial ' for the Holy Spirit?
• Many and Many of - a subtle difference in meaning?
• Short story about a committee planning to eliminate 1 in 10 people
• Writing a Puzzle Book: Enigmatic Puzzles
• How to understand the use of "used to"?
• Why did Resolve[] fail to verify a statement whose counter-example was proven to be nonexistant by FindInstance[]?
• Nonzero module with vanishing derived fibers
• Why do individuals with revoked master’s/PhD degrees due to plagiarism or misconduct not return to retake them?
• Can someone help me identify this plant?
• How do you determine maximum frequency of AD574A 12-bit ADC?
• With 42 supernovae in 37 galaxies, how do we know SH0ES results is robust?
• Is a user considered liable if its user accounts on social networks are hacked and used to post illegal content?
• Questions about best way to raise the handlebar on my bike
• Continuous function whose series of function values converges but its improper integral doesn't converge
• Someone wants to pay me to be his texting buddy. How am I being scammed?

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

How to set the output size of slides to 1:1(square)? #151

{{editor}}'s edit

Samko5sam aug 21, 2021.

Beta Was this translation helpful? Give feedback.

By a technical limitation, overriding width and height declarations for section elements through <style> is not working, as you have tried.

You can use custom slide size by using custom theme CSS.

See a documentation of your using tool about how to apply a custom theme CSS: https://github.com/marp-team/marp-cli#use-custom-theme (Marp CLI) and https://github.com/marp-team/marp-vscode#use-custom-theme-css-%EF%B8%8F (Marp for VS Code)

Replies: 1 comment · 4 replies

Yhatt aug 21, 2021 maintainer.

imflash217 Feb 21, 2022

yhatt Feb 22, 2022 Maintainer

This comment was marked as spam.

• Numbered list
• Unordered list
• Attach files

Select a reply