Marked-Extras (Youtube , Vimeo, DailyMotion, Viddler)

[tunnckoCore]

Hello again :)

Only to announce that I made it - hell yea 😄 That with medias, without Fatdown and TextFormatter.
I don't know how practical it is, but I download marked.js and add simple function to it to support YouTube, Viddler, DailyMotion, Vimeo AND Autolinking for non-media sites. 😄 For now are only that, but if someone want can add more with simple if-else's

02 May 2014: Working marked.js with Extras

Link to latest commit of my marked.js
Latest Gist doc files
Jsbin example of regex url parser

[tung-nguyen]

Good ideas !

[tunnckoCore]

Ohh... First comment of given gist disappears.. :D
Not ideas, reallity :) . May be not so good, but i'm not so fimiliar with js.
I just develope this function and set it on line 559 . I repeat, I don't know how practical it is to be there, but works perfect! :)

function mediaParser(provider, url) {
        if (provider === 'youtube') {
            var youtubeRegex = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
            var youtubeMatch = url.match(youtubeRegex);
            if (youtubeMatch && youtubeMatch[7].length == 11) {
                return youtubeMatch[7];
            } else {
                return undefined;
            }
        } else if (provider === 'vimeo') {
            var vimeoRegex = /^.*vimeo.com\/(\d+)/;
            var vimeoMatch = url.match(vimeoRegex);
            if (vimeoMatch && vimeoMatch[1].length == 8) {
                return vimeoMatch[1];
            } else {
                return undefined;
            }
        } else if (provider === 'viddler') {
            var viddlerRegex = /^.*((viddler.com\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
            var viddlerMatch = url.match(viddlerRegex);
            if (viddlerMatch && viddlerMatch[7].length == 8) {
                return viddlerMatch[7];
            } else {
                return undefined;
            }
        } else if (provider === 'dailymotion') {
            var dailymotionRegex = /^.+dailymotion.com\/((video|hub)\/([^_]+))?[^#]*(#video=([^_&]+))?/;
            var dailymotionMatch = url.match(dailymotionRegex);
            if (dailymotionMatch && (dailymotionMatch[5] || dailymotionMatch[3])) {
                if (dailymotionMatch[5]) {
                    return dailymotionMatch[5];
                }
                if (dailymotionMatch[3]) {
                    return dailymotionMatch[3];
                }
                return undefined;
            } else {
                return undefined;
            }
        } /* Buggie...
        else if (provider === 'html5') {

            var html5Regex = /.(?:wav|mp3|ogg|mp4|wma|webm|mp3)$/i;
            var html5Match = url.match(html5Regex);

            var data = {
                extension: html5Match,
                link: url
            };
            return data;
        } else {
            return;
        } */
    }

Works with huge variants of media links. :)

PS: Wrong line, sorry. Edited to 559 !!

[tung-nguyen]

@tunnckoCore i like project your, did you can share project :) with tutorial install, it's amazing!

[tunnckoCore]

What project? It's addon to marked.js :) Just add above code to main marked.js file on line 559 and it works, nothing more :)
Link is only for demo :)

PS: its possible to add more regex expressions for more medias (Flickr, Gist, JSFiddle, etc.)
With updates https://github.com/tunnckoCore/blankr/marked :)

[tung-nguyen]

I extremely link your share demo ! Can you share me project :)

2014-03-17 1:18 GMT+07:00 tunnckoCore notifications@github.com:

What project? It's addon to marked.js :) Just add above code to main
marked.js file on line 590 and it works, nothing more :)
Link is only for demo :)

Reply to this email directly or view it on GitHubhttps://github.com//issues/362#issuecomment-37765141
.

Mr. Nguyen Dinh Tung

tungnguyen@vsoft.vn | Phone: (04) 38.550.999 | Mobile. 0969.92.1080
| Skype : tungvn92

VSOFT Solution Co., Ltd

Trading office : Trung Yen 1 Tower - Vu Pham Ham str. - Cau Giay dist.-
Ha Noi.

[nbari]

This works but I think it brakes the idea behind markdown.

If html is needed, why not just disable the sanitize option; that way you can put any html like <iframe> etc.

[tunnckoCore]

@nbari, its like http auto linking.. nothing more. Why have to put all sucking html (or custom iframe/embed codes), when just can paste link and if it is from "media" (like video sites) to be generate automatically

---

Sorry for english, but its night here :)

[tunnckoCore]

@jonschlinkert, have it in mind for your remarked ;] Not the best doc, but look at the given lines for more detail look or tweet me if needs something.
That was long time ago, soon i'll create separate module for media parser.

Also, it's good idea to see some of issues here.

---

Live demo is moved to http://tunnckocore.github.io/blankr/markedjs/, old links edited.

[howardroark]

I have been thinking about this problem for some time and have posted my WIP thoughts to commonmark/commonmark-spec#123

[tunnckoCore]

closing.. we already have jonschlinkert/remarkable and also with him and few other guys we planing RegExps Org - more info for it

[howardroark]

Thanks for that link @tunnckoCore !

It looks like this library should help this concept nicely... https://github.com/rlidwka/remarkable-regexp

[tunnckoCore]

@howardroark yea, it looks great! Thanks!

[albfan]

Probably link to sources will help: https://github.com/tunnckoCore/blankr/tree/gh-pages/markedjs

I'm curious why this is not under image markdown

[albfan]

After review the demo this is a rework using image tag so you can control alternate property, title, width and height:

Works for any image (img), video (html5), and common video providers (youtube, vimeo, Dailymotion, viddler):

const renderer = new marked.Renderer();

function sanitize(str) {
  return str.replace(/&<"/g, function (m) {
    if (m === "&") return "&amp;"
    if (m === "<") return "&lt;"
    return "&quot;"
  })
}

/**
 * Parse url of video to return Video ID only
 * if video exists and matches to media's host
 * else undefined
 *
 * @example mediaParseIdFromUrl('youtube', 'https://www.youtube.com/watch?v=fgQRaRqOTr0')
 * //=> fgQRaRqOTr0
 *
 * @param  {string} provider    name of media/video site
 * @param  {string} url         url of video
 * @return {string|undefined}   the parsed id of video, if not match - undefined
 */
function mediaParseIdFromUrl(provider, url) {
  if (provider === 'youtube') {
    var youtubeRegex = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
    var youtubeMatch = url.match(youtubeRegex);
    if (youtubeMatch && youtubeMatch[7].length == 11) {
      return youtubeMatch[7];
    } else {
      return undefined;
    }
  } else if (provider === 'vimeo') {
    var vimeoRegex = /^.*vimeo.com\/(\d+)/;
    var vimeoMatch = url.match(vimeoRegex);
    if (vimeoMatch && vimeoMatch[1].length == 8) {
      return vimeoMatch[1];
    } else {
      return undefined;
    }
  } else if (provider === 'viddler') {
    var viddlerRegex = /^.*((viddler.com\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
    var viddlerMatch = url.match(viddlerRegex);
    if (viddlerMatch && viddlerMatch[7].length == 8) {
      return viddlerMatch[7];
    } else {
      return undefined;
    }
  } else if (provider === 'dailymotion') {
    var dailymotionRegex = /^.+dailymotion.com\/((video|hub)\/([^_]+))?[^#]*(#video=([^_&]+))?/;
    var dailymotionMatch = url.match(dailymotionRegex);
    if (dailymotionMatch && (dailymotionMatch[5] || dailymotionMatch[3])) {
      if (dailymotionMatch[5]) {
        return dailymotionMatch[5];
      }
      if (dailymotionMatch[3]) {
        return dailymotionMatch[3];
      }
      return undefined;
    } else {
      return undefined;
    }
  } else if (provider === 'html5') {
    var html5Regex = /.+\.(wav|mp3|ogg|mp4|wma|webm|mp3)$/i;
    var html5Match = url.match(html5Regex);

    if (html5Match && html5Match[1]) {
        return {'link': html5Match[0], 'extension': html5Match[1]};
    } else {
      return undefined;
    }
  } else {
    return undefined;
  }
}

function create_iframe(src, title, alt, height, width) {
      var res = '<iframe';
      if (title) res += ' title="' + sanitize(title) + '"'
      if (height) res += ' height="' + height + '"'
      if (width) res += ' width="' + width + '"'
      res += ' src="' + src + '" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>';
      res += sanitize(alt)+'</iframe>';
      return res;
}
/**
 * Make Marked support specifying image size in pixels in this format:
 *
 * ![alt](src = x WIDTH)
 * ![alt](src = HEIGHT x)
 * ![alt](src = HEIGHT x WIDTH)
 * ![alt](src = x WIDTH "title")
 * ![alt](src = HEIGHT x "title")
 * ![alt](src = HEIGHT x WIDTH "title")
 *
 * Note: whitespace from the equals sign to the title/end of image is all
 * optional. Each of the above examples are equivalent to these below,
 * respectively:
 *
 * ![alt](src =xWIDTH)
 * ![alt](src =HEIGHTx)
 * ![alt](src =HEIGHTxWIDTH)
 * ![alt](src =xWIDTH "title")
 * ![alt](src =HEIGHTx "title")
 * ![alt](src =HEIGHTxWIDTH "title")
 *
 * Example usage:
 *
 * ![my image](https://example.com/my-image.png =400x600 "My image")
 * ![](https://example.com/my-image.png =400x "My image")
 * ![](https://example.com/my-image.png =400x)
 */
renderer.image = function (src, title, alt) {
  const parts = /(.*)\s+=\s*(\d*)\s*x\s*(\d*)\s*$/.exec(src)
  var url = src
  var height = undefined
  var width = undefined
  if (parts) {
    url = parts[1]
    height = parts[2]
    width = parts[3]
  }
  var YouTube = mediaParseIdFromUrl('youtube', url);
  var Vimeo = mediaParseIdFromUrl('vimeo', url);
  var Viddler = mediaParseIdFromUrl('viddler', url);
  var DailyMotion = mediaParseIdFromUrl('dailymotion', url);
  var Html5 = mediaParseIdFromUrl('html5', url);
  let res = ''
  if (YouTube !== undefined) {
      res = create_iframe('//www.youtube.com/embed/' + YouTube, title, alt, height, width);
  } else if (Vimeo !== undefined) {
      res = create_iframe('//player.vimeo.com/video/' + Vimeo + '?api=1', title, alt, height, width);
  } else if (Viddler !== undefined) {
      res = create_iframe('//www.viddler.com/player/' + Viddler, title, alt, height, width);
  } else if (DailyMotion !== undefined) {
      res = create_iframe('//www.dailymotion.com/embed/video/' + DailyMotion, title, alt, height, width);
  } else if (Html5) {
      res = '<video';
      if (height) res += ' height="' + height + '"'
      if (width) res += ' width="' + width + '"'
      res += ' controls><source src="'+Html5['link']+'" type="video/'+Html5['extension']+'">'
      if (alt) res += sanitize(alt)
      res += '</video>';
  } else {
      res = '<img '
      if (height) res += ' height="' + height + '"'
      if (width) res += ' width="' + width + '"'
      res += 'src="' + sanitize(url) + '"'
      if (alt) res += ' alt="' + sanitize(alt) + '"'
      if (title) res += ' title="' + sanitize(title) + '"'
      res += '>'
  }

  return res
}

marked.setOptions({
  renderer: renderer
})

usage examples:

![youtube video](https://www.youtube.com/watch?v=Ya-QlEaonLU =200x400)
![embedded video](mov_bbb.mp4 =400x)

[tunnckoCore]

@albfan good idea, definitely! But auto-linking and auto-embeding sounds better to me.

Soooo, many years... jesus. 😆

[albfan]

Indeed you can add verbatim html, this is just if you want non technical users to deal with multimedia

[cphpi]

where add this code?