GithubHelp home page GithubHelp logo

Add newer GFM features about commonmark HOT 3 CLOSED

jonaskohl avatar jonaskohl commented on June 16, 2024
Add newer GFM features

from commonmark.

Comments (3)

colinodell avatar colinodell commented on June 16, 2024 1

I built a rough working prototype of this.

That's awesome!

Any interest including in this repo? If not, no problem, I can release as a separate package.

I'm hesitant to include this here right now because:

  1. It's technically not (yet?) part of GFM, so it shouldn't be included as part of our GFM extension
  2. There's no consensus that GitHub's admonitions should be the "standardized" way to implement them (there are other formats out there)
  3. There's no spec for this, and reverse-engineering the edge cases around GitHub's implementation doesn't sound like a fun time.

But if you do release it as a separate package I'd be happy to link to it from the README and/or docs to help other users find it!

(Sorry for the delayed response here)

from commonmark.

colinodell avatar colinodell commented on June 16, 2024

Thanks for the suggestion!

Unfortunately, those features aren't actually part of the GFM spec: github/cmark-gfm#350 It's some kind of custom post-processing that GitHub does. I can certainly understand how parity with GitHub.com could be useful but without a spec to follow it's difficult to ensure we are handling every possible edge case the same exact way.

Therefore, it's unlikely that we'll incorporate that into this library. But if you find (or create) an extension for these we'd be happy to link to it!

from commonmark.

kbond avatar kbond commented on June 16, 2024

Unfortunately, those features aren't actually part of the GFM spec

I think they might be in the future, they're considered "beta" right now.

@colinodell, I built a rough working prototype of this. Any interest including in this repo? If not, no problem, I can release as a separate package.

final class GFMNotesRenderer implements NodeRendererInterface
{
    private const NOTE_TYPES = [
        'NOTE',
        'TIP',
        'IMPORTANT',
        'WARNING',
        'CAUTION',
    ];

    private BlockQuoteRenderer $baseRenderer;

    public function __construct()
    {
        $this->baseRenderer = new BlockQuoteRenderer();
    }

    public function render(Node $node, ChildNodeRendererInterface $childRenderer)
    {
        if (!$parsed = $this->parseBlockQuote($node)) {
            return $this->baseRenderer->render($node, $childRenderer);
        }

        [$textNode, $type] = $parsed;

        $textNode->detach();

        $p = new Paragraph();
        $p->data->set('attributes', ['class' => 'markdown-note-label']);
        $p->appendChild(new Text(ucfirst($type)));

        $node->prependChild($p);
        $node->data->set('attributes', ['class' => sprintf('markdown-note markdown-note-%s', $type)]);

        return $this->baseRenderer->render($node, $childRenderer);
    }

    /**
     * @return array{0:Text,1:string}|null
     */
    private function parseBlockQuote(Node $node): ?array
    {
        $textNode = $node->firstChild()?->firstChild();

        if (!$textNode instanceof Text || !preg_match('#^\[!([A-Z]+)]$#', $textNode->getLiteral(), $matches)) {
            return null;
        }

        $type = $matches[1];

        if (!in_array($type, self::NOTE_TYPES, true)) {
            return null;
        }

        return [$textNode, strtolower($type)];
    }
}

from commonmark.

Related Issues (20)

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.