All Projects → sinnbeck → markdom

sinnbeck / markdom

Licence: other
A markdown parser for laravel for making beautiful html

Programming Languages

PHP
23972 projects - #3 most used programming language

Projects that are alternatives of or similar to markdom

koino
CommonMark + GFM compatible Markdown parser and renderer
Stars: ✭ 81 (+92.86%)
Mutual labels:  commonmark
markdown-it-github-headings
Add anchors and links to headings just like Github does
Stars: ✭ 22 (-47.62%)
Mutual labels:  commonmark
todo
ToDo List built with Laravel, Livewire, Tailwind, Heroicons UI.
Stars: ✭ 38 (-9.52%)
Mutual labels:  livewire
markdown
The first generation of Markdown rendering for R (born in 2012). Now R Markdown usually means the *r*markdown package instead of *markdown*. The repo for the former is at https://github.com/rstudio/rmarkdown
Stars: ✭ 64 (+52.38%)
Mutual labels:  commonmark
ui
Laravel Livewire & Bootstrap 5 UI & CRUD starter kit.
Stars: ✭ 82 (+95.24%)
Mutual labels:  livewire
clj-pdf-markdown
Library for rendering markdown to clj-pdf data-structure syntax.
Stars: ✭ 20 (-52.38%)
Mutual labels:  commonmark
x-blade-components
Laravel Blade Components ready to use
Stars: ✭ 36 (-14.29%)
Mutual labels:  livewire
laravellte
Fully customizable and tests supported Laravel admin dashboard 2.0
Stars: ✭ 202 (+380.95%)
Mutual labels:  livewire
markdig.wpf
A WPF library for xoofx/markdig https://github.com/xoofx/markdig
Stars: ✭ 133 (+216.67%)
Mutual labels:  commonmark
paka.cmark
Lightweight CFFI-based Python bindings to cmark library (CommonMark implementation in C).
Stars: ✭ 23 (-45.24%)
Mutual labels:  commonmark
website
Source code of the Laravel Cameroon meetup website.
Stars: ✭ 47 (+11.9%)
Mutual labels:  livewire
adoteumdev
The AdoteUmDev project
Stars: ✭ 101 (+140.48%)
Mutual labels:  livewire
livewire-eshop
A sample Laravel shop built using LiveWire UI Framework and Paystack Checkout
Stars: ✭ 108 (+157.14%)
Mutual labels:  livewire
daybreak
Simple timesheets and vacation management for small businesses.
Stars: ✭ 111 (+164.29%)
Mutual labels:  livewire
swift-markdownkit
A framework for parsing and transforming text in Markdown format written in Swift 5 for macOS, iOS, and Linux. The supported syntax is based on the CommonMark specification. The framework defines an abstract syntax for Markdown, provides a parser for parsing strings into abstract syntax trees, and comes with generators for creating HTML and attr…
Stars: ✭ 64 (+52.38%)
Mutual labels:  commonmark
BackEnd-Squad
Back End Squad Roadmap
Stars: ✭ 24 (-42.86%)
Mutual labels:  livewire
markdown-toolbar
A clone of GitHub's markdown toolbar
Stars: ✭ 19 (-54.76%)
Mutual labels:  commonmark
CRUD-Laravel-Livewire-SPA
CRUD Laravel 7 & Livewire (SPA) Single Page Application
Stars: ✭ 34 (-19.05%)
Mutual labels:  livewire
livewired
Reusable components for @livewire applications
Stars: ✭ 12 (-71.43%)
Mutual labels:  livewire
charaza-ui
Lightweight Laravel 8 Admin CRUD generator and Starter template with Jetstream, Livewire and Tailwindcss Frontend
Stars: ✭ 50 (+19.05%)
Mutual labels:  livewire

Latest Version on Packagist Downloads on Packagist tests

Introduction

Markdom is a laravel package to make it simple to convert markdown to beautifully rendered html. It adds classes and allows you to automatically do code highlighting.

Preview

Installation

Install the package using composer

$ composer require sinnbeck/markdom

After that is a good idea to add the facade to your config/app.php aliases array.

'Markdom' => Sinnbeck\Markdom\Facades\Markdom::class,

Publish the config

To publish the config file simply run the following to add markdom.php to your config directory.

php artisan vendor:publish --tag=markdom-config

Usage

Markdom comes with a blade helper to easily convert markdown to html

@markdom($markdown)

You can also call it though the facade

Markdom::toHtml($markdown)

Configuration

The main feature of Markdom is to add classes to your rendered html. This requires you to set up a class map in markdom.php. This determines which elements are getting what classes. Here is a quick example using TailwindCss syntax.

    'classes' => [
        'h1'     => 'text-3xl font-bold mt-1 mb-2 border-b',
        'h2'     => 'text-2xl font-bold my-1 border-b',
        'h3'     => 'text-xl font-bold my-1',
        'p'      => 'py-2',
        'ul'     => 'list-disc list-inside',
        'ul ul'  => 'pl-8 list-disc list-inside',
        'ol'     => 'list-decimal list-inside',
        'pre'    => 'my-1'
    ],

The key can be any css selector, meaning you can also do ul > li > ul or even .classname. The classes are parsed in the order that they are listed in the config, meaning you can add additional classes to those set before.

    'classes' => [
        'h1'     => 'title text-3xl ',
        'h2'     => 'title text-2xl',
        'h3'     => 'title text-xl',
        '.title' => 'font-bold border-b',
    ],

The above will add the class title to the header elements, and the then 'font-bold border-b' to each.
Result:

<h1 class="title text-3xl font-bold border-b">Title</h1>
<h2 class="title text-2xl font-bold border-b">Subtitle</h2>
<h3 class="title text-xl font-bold border-b">More</h3>

Adding id and href

Markdom makes it simple to add id and links (<a href />) to headings (for use in documentation). Just set the links.enabled to true in the markdom.php config file, and Markdom takes care of the rest.

Check the documentation if the config, for configuration options.

Markdown configuration

It is possible to tweak the parsing of markdown. Under the hood, Mardom uses league/commonmark, meaning all settings under the commonmark key, is just sent directly to CommonMark. See a list of available settings here: https://commonmark.thephpleague.com/2.3/configuration/#configuration

Markdown extensions

CommonMark comes with a lot of extensions. These can be added to the commonmark_extensions array which will make them automatically load. See a list of available extensions here: https://commonmark.thephpleague.com/2.3/extensions/overview/

Code highlighting

If you are using markdown for parsing code, you may enable the code highlighter, by setting MARKDOM_CODE_HIGHLIGHT=true in your .env file. This will automatically add highlight.js classes to the code found in code tags.

CommonMark will convert `somecode` and
```
somecode
```
to <code>somecode</code> and <pre><code>somecode</code></pre> which will be passed to scrivo/highlight.php (a php implementation of highlight.js).

Highlight theme and css

It is possible to have your code styled automatically. This can be done simply by adding the @markdomStyles() directive to your page. This will embed the highlight.js css into your page. You can pass the name of a theme to the method, to get a specific stylesheet @markdomStyles('purebasic')

Highlighting theme

Highlight.js supports 91 themes currently. You can get an array of these themes by using Markdom::getAvailableThemes(). This can be useful for rendering a select, if the user is allowed to select theme.

<select>
    @foreach(Markdom::getAvailableThemes() as $style)
        <option value="{{$style}}">{{$style}}</option>
    @endforeach
</select> 

Examples

Controller (markdown can be also be loaded from database or a file)

    public function index()
    {
        $markdown = 
<<<markdown
# Title
## Subtitle

* List item
* List item 2
1. Numbered list item
2. Numbered list item 2

### Code

\```
$this->foo = 'bar';
\```

Inline code `const $x = [1, 2, 3];`

### Text formatting
**Bold** \
__Bold__ \
_Italic_ \
~~Crossed~~

### Escaped html
<script>alert()</script>
markdown;

        return view('markdown.index', compact('markdown'));
    }

index.blade.php

@extends('layouts.app')
@section('content')
    @markdom($markdown)
@endsection

Livewire

Markdom also works great with Livewire and does not require any javascript.

You can get a working example of an autoupdating markdown editor using livewire here: https://github.com/sinnbeck/markdom-livewire

Update notice!

If you are upgrading from version 1.x to 2.x, be aware that the config format has changed alot due to changes in commonmark! It is therefor a good idea to check the new example config file in the /config directory.

Testing

Run tests with

vendor/bin/pest

Todo

  • Handle loading of highlight styles using <link syntax
  • Minification of highlight styles
  • Guide for using cdn version of highlight styles (inline code breaks!)
  • Look into passing manually set language to highlight.php

Credits

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].