Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

some macro support #466

Closed
golyshevd opened this issue Aug 6, 2014 · 8 comments
Closed

some macro support #466

golyshevd opened this issue Aug 6, 2014 · 8 comments

Comments

@golyshevd
Copy link

marked is great, but it lacks of ability to extend it with new syntax constructions.
Inspired by asciidoc I suggest to support some macro construction like inline-macro and block-macro (wrapper) to extend it by user

One example of usage, just thoughts:

inline-macro

{{userpic(id=42)}}

block macro

{{image-slider(effect=fade) {
    ![sea](http://example.org/sea.png)
    ![sun](http://example.org/sun.png)
    ![cats](http://example.org/cats.png)
}}}

Nested macros:

{{media-slider(effect=slide) {
    ![sea](http://example.org/sea.png)
    {{video-frame(type="youtube", id="asdasd")}}
    ![cats](http://example.org/cats.png)
}}}

And nested block macros:

{{aligner(type=left) {
    {{image-slider(effect=fade) {
        ![sea](http://example.org/sea.png)
        ![sun](http://example.org/sun.png)
        ![cats](http://example.org/cats.png)
    }}}
}}}

And it would be possible to extend it this way:

marked.registerMacro('image-slider', function (params) {

    return '<div class="my-slider">%s</div>';
});

All examples are born just now, and please, don't hit me, but this feature could make markdown infinitely extensible and flexible.

@howardroark
Copy link

I'm going to have to +1 where your head is at.

I think the code and assets powering each macro would be an excellent bower package. From there it would only be a matter of including it in your bower file along with marked. The GitHub home of each macro could house all of the operational instructions. The macro's core javascript would just have to register itself with marked before marked runs. After that marked would just convert the Markdown macros into HTML and fire a callback. The register macro part should likely be supplied a callback which signals the macro to do its own DOM work.

I would vote against the complexity of the nesting though. Markdown is meant for writing, not really as a catch all replacement for HTML. It may be a stretch to assume that someone without development experience could wrangle how to use those blocks. Instead what it if macros always expect just a string, maybe a developer uses the aid of Jison to deal with it.

Perhaps a scientific writer could benefit from a handy venn diagram macro...

{{venn:
Soccer = alex, casey, drew, hunter
Tennis = casey, drew, jade
Soccer ∪ Tennis
}}

The macro code could turn the output html to an SVG object. Likely it would search for a unique data attribute after marked ran the callback.

Or a youtube video... {{youtube: id}}

@golyshevd
Copy link
Author

I would vote against the complexity of the nesting though. Markdown is meant for writing, not really as a catch all replacement for HTML. It may be a stretch to assume that someone without development experience could wrangle how to use those blocks.

But no one writer will be forced to put macro in macro, right? But it is feature :)

Instead what it if macros always expect just a string, maybe a developer uses the aid of Jison to deal with it.

What string? All braces content like here?

Soccer = alex, casey, drew, hunter
Tennis = casey, drew, jade
Soccer ∪ Tennis

Probably optionally. I think it should have the only one way to pass parameters for macro. At least it should have default behavior.

The macro code could turn the output html to an SVG object. Likely it would search for a unique data attribute after marked ran the callback.

Did you mean somewhat like that?

marked.addMacro('my-svg-macro', function () {

    return '<div class="some-placeholder"></div>'
});

marked('... {{my-svg-macro:id=42}} ...', function (err, res) {
    $('body').append(res);
    if ( supportSvg() ) {
         $('.some-placeholder').addMyAwesomeSvg();    
    } else {
         $('.some-placeholder').gracefullyDegradeToImage();    
    }
});

macro is just subrenderer, if you do not want generate some details in macro you just should do it after rendering

<venn-diagram>
Or a youtube video... {{youtube: id}}

Yes!

There are many cases where markdown would might be more rich. But it is impossible to support an unique syntax for each case. Therefore I think that it is not so bad idea.

@anko
Copy link

anko commented Aug 11, 2014

It's not marked's job to extend Markdown.

How about

markdownString.replace(/{{(.*)}}/g, function(match) { /* Amazing macro-expand logic */ })

and pass the result of that to marked?

@golyshevd
Copy link
Author

@anko thanks for idea, just published https://www.npmjs.org/package/macroed but separate macro processor

@howardroark
Copy link

Good point @anko, the Unix philosophy causes great things.

I will check this out @golyshevd! It's awesome how inspired you were to whip this up so quickly :)

I plan to start a project that focuses on scientific writing with Markdown. The idea is to have it be a UI that harnesses GitHub OAUTH and hosts papers with GitHub Pages. Just looking to see what open-source is out there to build it all.

I think your implementation would work. An intelligent person should be able to grasp the idea of syntax. I just think it would be very cool if there was a universal macro syntax that enabled scientists the ability to turn written math into graphs.

This project inspired me...

https://github.com/vitoravelino/js-sequence-diagrams

I turned it into a service that let's you make sequence diagrams in Markdown. Still needs syntax though to manage the GET params. I'd love to convert it into a macro that accepted plain text with line breaks. I suppose your code could offer that if I made use of the %s value.

![sequence](http://get-diagrams.com/sequence?json=[
    "Andrew-->China: Says Hello",
    "Note right of China: China thinks about it",
    "China-->Andrew: How are you?",
    "Andrew-->>China: I am good thanks!"
    ])

![sequence](http://get-diagrams.com/sequence?json=[
"Andrew-->China: Says Hello",
"Note right of China: China thinks about it",
"China-->Andrew: How are you?",
"Andrew-->>China: I am good thanks!"
])

@golyshevd
Copy link
Author

@howardroark it is so unstable and just now, we refactor macro syntax to easier indent oriented. The current solution is so poor and it is so conflicting with markdown as post/pre processor. But tomorrow we should complete writing the code, tests and documentation. Our writers marking up so difficult articles and need flexible solution. Comimg soon=)

@howardroark
Copy link

@golyshevd I'll keep watching the repo. Good luck!

@golyshevd
Copy link
Author

@howardroark look at that (it is still beta)

//  nodejs
var macroed = require('macroed');

macroed.registerMacro({
    name: 'sequence',
    generate: function (params) {

         return '<div class="sequence sequence_hidden_yes">%s</div>';
    }
});

macroed.registerProc({
    name: 'noop',
    process: function (content) {
        return content;
    }
});

// get it from backend or anywhere
var text = [
    '#my super diagram',
    '||noop:sequence()',
    '    Andrew-->China: Says Hello',
    '    Note right of China: China thinks about it',
    '    China-->Andrew: How are you?',
    '    Andrew-->>China: I am good thanks!'
].join('\n');

//  render it on html page
var s = macroed.expandString(text);
// browser
$('.sequence').each(function (i, elem) {
   $.get('http://blah/get-sequence?param=' + $(elem).text()).done(function (res) {
       $(elem).html('').append(res);
       $(elem).removeClass('sequence_hidden_yes');
   });
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants