https://github.com/visuellverstehen/markdown-to-html
Convert Markdown into HTML elements and provide them with CSS or Tailwind classes.
https://github.com/visuellverstehen/markdown-to-html
bem-methodology css3 html laravel markdown tailwindcss
Last synced: 2 months ago
JSON representation
Convert Markdown into HTML elements and provide them with CSS or Tailwind classes.
- Host: GitHub
- URL: https://github.com/visuellverstehen/markdown-to-html
- Owner: visuellverstehen
- License: mit
- Created: 2021-03-02T12:35:52.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-02-22T18:46:38.000Z (over 2 years ago)
- Last Synced: 2025-03-24T05:52:00.108Z (7 months ago)
- Topics: bem-methodology, css3, html, laravel, markdown, tailwindcss
- Language: PHP
- Homepage:
- Size: 41 KB
- Stars: 4
- Watchers: 5
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Markdown to HTML
## Installation
`composer require visuellverstehen/markdown-to-html`
## Usage
There might be cases, if for example using [TailwindCss](https://tailwindcss.com), where you want to use custom classes to style your output.
### Getting started
```php
use VV\Markdown\Facades\Markdown;
Markdown::parse($yourContent); // The output will be HTML
```
### Configuration
First you will need to publish your vendor assets:
```$ php artisan vendor:publish```
Then choose the mardown option. this will create a ```config/markdown.php``` file in your app that you can modify to set your configuration.
To add or change style sets, simply add or change an array with classes that should be added to the HTML tag.
```php
'default' => [
'h1' => 'text-2xl',
'a' => 'link hover:text-blue',
'p' => 'mb-5',
'li p' => 'mb-2 ml-4',
],
```
*This example uses TailwindCSS, but you can use whatever kind of CSS you want.*
### Example Output
```html
A headline
Some text
A list item
A list item
Another text
```
#### Multiple styles
Define multiple styles in your config, so you can switch between them and use different stylings in different places of your application.
```php
// config/markdown.php
'styles' => [
'default' => [
'h1' => 'text-2xl',
'p' => 'mb-2',
],
'wiki' => [
'h1' => 'text-4xl',
'p' => 'mb-8',
],
...
```
Define `style` to switch between styles.
```php
Markdown::style('wiki')->parse($yourContent);
```
No need to define default. If nothing has been provied, markdown will look for the default style.
# More about us
- [www.visuellverstehen.de](https://visuellverstehen.de)
# License
The MIT License (MIT). Please take a look at our [License File](LICENSE.md) for more information.