Git Product home page Git Product logo

marpstyle's Introduction

Marpstyle: styles for the MARP package

marpstyle was created with beauty and simplicity as its main concerns, while taking functionality into account. Back in 2021, when the first plato.css theme was ready, I decided to share it freely here on Github. I sincerely hope you make good use of it and that it comes to be as useful to you as it has been to me.

If you find it useful, all I ask is that you give the credits in you presentarions.

(updates - 31.mar.2024)

  • Max Weber

More styles will be released soon. Stay tuned for more marpstyle themes!

One Example of Marp slide creation with style!

This slide deck was created for a presentarion about Artifical Inteligence (AI). It show some of the capabilities of MARP as well my CSS styles. I hope you like it.

Academic presentation on philosophical aspects of Artificial Intelligence (AI):

What is Marp?

Available Themes

Here you´ll find examples of the available themes. Click on the picture to open a corresponding PDF example.

In honor of Σωκράτης - Socrates (469–399 B.C.E.)

Style: Socrates

In honor of Πλάτων - Platon (429?–347 B.C.E.)

Style: Plato

In honor of René Descartes (1596–1650)

Style: Descartes

In honor of Leibniz (1646–1716)

Style: Leibniz

In honor of Immanuel Kant (1724–1804)

Style: Kant

In honor of Hegel (1770–1831)

Style: Hegel

In honor of Sigmund Freud (1856-1939)

Style: Freud

In honor of Edmund Husserl (1859–1938)

Style: Husserl

In honor of Max Weber (1864–1920)

Style: Weber

In honor of Albert Einstein (1879–1955)

Style: Einstein

In honor of Martin Heidegger (1889–1976)

Style: Heidegger

In honor of Kurt Gödel (1906-1978)

Style: Gödel

In honor of Hannah Arendt (1906-1975)

Style: Arendt

In honor of Alan Turing (1912-1954)

Style: Turing

In honor of Martin Luther King (1929-1968)

Style: King

In honor of Steven Jobs (1955–2011)

Style: Jobs


What´s necessary to install?

Course you need Marp installed and operational. I created the available styles having the VSCode environment in mind, and only it. But it doesn´t mean they don´t work well with other environments, I only did not test it at all.

  1. My suggestion is that you create a separate folder for each presentation you intend to create. Inside this presentarion folder I do also recomend you to create another folder, which might be called /style, specifically destinated for the CSS style files you intend do use in your presentation.

  2. A prerequisite for using some extra fonts is that you have them installed on your computer. That said, some of the styles available here require special fonts not available by default in most OS installations. I intend to make some modifications so that these fonts are automatically downloaded from internet, but until this modification ins implemented, you will find below a section containing informations about the special fonts use in some of my styles and a possible locations where from you can download them (for free).

  3. If you use MARP for VSCode, remember to include the path to the theme files (CSS files) in your workspace.code-workspace in order to make them available to your slide deck.

It might look similar to:


{
	"folders": [
		{
			"path": "."
		}
	],
	"settings": {
		"markdown.marp.themes": [
			"./style/arendt.css",
			"./style/descartes.css",
			"./style/einstein.css",
			"./style/freud.css",
			"./style/godel.css",
			"./style/hegel.css",
			"./style/heidegger.css",
			"./style/husserl.css",
			"./style/jobs.css",
			"./style/kant.css",
			"./style/king.css",
			"./style/leibniz.css",
			"./style/orwell.css",
			"./style/pascal.css",
			"./style/plato.css",
			"./style/schema.css",
			"./style/simple.css",
			"./style/socrates.css",
			"./style/structure.css",
			"./style/turing.css",
			"./style/weber.css",
		]
	}
}

Styles directly from the internet

You might as well use my themes directly from github using the url, just like depicted below:

{
	"folders": [
		{
			"path": "."
		}
	],
	"settings": {
		"markdown.marp.themes": [
			"https://cunhapaulo.github.io/style/arendt.css",
			"https://cunhapaulo.github.io/style/descartes.css",
			"https://cunhapaulo.github.io/style/einstein.css",
			"https://cunhapaulo.github.io/style/freud.css",
			"https://cunhapaulo.github.io/style/godel.css",
			"https://cunhapaulo.github.io/style/hegel.css",
			"https://cunhapaulo.github.io/style/heidegger.css",
			"https://cunhapaulo.github.io/style/husserl.css",
			"https://cunhapaulo.github.io/style/jobs.css",
			"https://cunhapaulo.github.io/style/kant.css",
			"https://cunhapaulo.github.io/style/king.css",
			"https://cunhapaulo.github.io/style/leibniz.css",
			"https://cunhapaulo.github.io/style/orwell.css",
			"https://cunhapaulo.github.io/style/pascal.css",
			"https://cunhapaulo.github.io/style/plato.css",
			"https://cunhapaulo.github.io/style/schema.css",
			"https://cunhapaulo.github.io/style/simple.css",
			"https://cunhapaulo.github.io/style/socrates.css",
			"https://cunhapaulo.github.io/style/structure.css",
			"https://cunhapaulo.github.io/style/turing.css",
			"https://cunhapaulo.github.io/style/weber.css",	
				
		]
	}
}

Typefaces (TTF Fonts)

In the first editions of Marpstyle, it was necessary to download and install some of the fonts used. Now this is no longer necessary, as they are automatically downloaded from a website. Even so, I've kept here the reference and the sites from which these fonts can be downloaded and installed locally. See below:

Observation about fonts:

Recently I decided to make use of downloading fonts from internet instead of forcing the user to install TTF fonts in their systems. Should it break in the future, due to the stop of the site proving the sources, be advised to resort to the old method instead.

Credits

marpstyle's People

Contributors

cunhapaulo avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

marpstyle's Issues

Set up theme application help

Dear cunhapaulo, thank you so much for your excellent job for making the slides more beautiful! I use Marp for academic slides writing.

However, some issues happened when I try to apply the default themes. I've pull a help here: marp-team/marp#115
Would you like to help?

I am really interested in the project but I am a novice on coding... Thank you!

How to change the CSS slightly

Hi,

Your css files for marp theme are awesome. Thanks for sharing it.

I would like to only slightly modify it. But as a newbie of css, I met some trouble. I want to modify the looking of numbered list. It seems the related sentence is <!-- _class: cool-list --> in the md file, but in the corresponding css file seemingly no related description is included. I also noticed the @import "schema"; in the css file. Do you know where to find the "schema" file?

How to use with marp-cli ?

Thanks for these beautiful styles. I cloned your repo and am able to see the styled slides perfectly with the vs code marp extension.

However, I have not been able to make these work from the command line. Perhaps this is a question best directed at the marp-cli repo (on the use of themes), but I thought I'd check to see if perhaps you might know since it's an important use case.

The relevant CSS files do not seem to be found. For example from the root of the marpstyle folder I try:

marp --server ./examples --theme-set ./style

This correctly gives me a choice to open any of the slide demos from the examples folder. But when I open any demo such as example-kant.md the rendered version in the slider presenter looks like this:

image

Do you have any experience with using these styles from the command line, or any suggestions? THanks!

update: I did post the same issue to the marp-cli repo, because thinking of this led to a few other questions: marp-team/marp-cli#440

Column Class not Working

Thank you for making some great Marp themes!

In the examples you utilize the following code to generate two columns of text (specifically lists):

<div class="columns">
<div>

1. Item
2. Item
3. Item

</div>
<div>

4. Item
5. Item
6. Item

</div>
</div>

When looking at your PDF output, this rendered two columns within the slide. Although when I download your Markdown example file example-einstein.md it does not render correctly using the Marp extension within VS Code or when I export to PDF.

Any assistance would be helpful, thank you!

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.