Skip to content

Make markdown image syntax more powerful: embed anything

License

Notifications You must be signed in to change notification settings

capripot/markdown_videos

Repository files navigation

Markdown Videos

Travis CI Test status Gem Version

Have you ever wished the markdown image syntax would be able to render more than just images?

markdown_videos helps you with that dream, and renders automatically your markdown image syntax elements to the appropriate embed video service HTML markup.

Installation

$ gem install markdown_videos

or add it to your Gemfile

gem "markdown_videos"

and do

$ bundle install

Usage

require "markdown_videos" # if you don't use bundler

markdown_text = "![my youtube video](https://youtu.be/StTqXEQ2l-Y)"
html_rendered = MarkdownVideos.render(markdown_text)

puts html_rendered.to_s
<iframe width="560" height="315" title="a title" src="https://www.youtube.com/embed/StTqXEQ2l-Y" frameborder="0" allowfullscreen></iframe>

You should use it before any other Markdown renderer.

Options

You can add optional parameters to render:

  • :wrapper wraps the HTML embed element with the given string, %s must be present
  • :class_name add a class attribute to HTML embed element

Example:

MarkdownVideos.render(markdown_text, wrapper: '<p class="flex-video">%s</p>', class_name: "embed-video")

Configure default options

Example: create an initializer file to override default options and make the renderer Bootstrap friendly.

MarkdownVideos.configure do |config|

  # For bootstrap css framework support by default
  config.wrapper = '<p class="embed-responsive embed-responsive-16by9">%s</p>'
  config.class_name = 'embed-responsive-item'

end

Supported services

Can be http or https protocol

Add your own service

You can add your own video service:

my_awesome_service.rb:

module MarkdownVideos::Services

  class MyAwsomeService < ServiceBase

    def self.regexp
      /^(https?:\/\/myaweso.me\/video\/([\w\-]{4,16})\??([\w\-\=]+)?)$/
    end

    def width
      560
    end

    def height
      315
    end

    def url
      "https://player.myaweso.me/video/#{resource_id}"
    end

    def url_parameters
      [:start]
    end

  end

end

Or even any random service that can be embeded:

twitter_service.rb:

module MarkdownVideos::Services

  class TwitterService < ServiceBase

    # Matching https://twitter.com/DevpostHacks/status/628627980445712384
    #
    def self.regexp
      /^(https?:\/\/twitter\.com\/([\w]+)\/status\/([0-9]+))$/
    end

    def url
      "https://twitter.com/#{markdown_url_data[2]}/status/#{markdown_url_data[3]}"
    end

    def to_html
      "<blockquote class=\"twitter-tweet\" data-lang=\"en\"><a href=\"#{url}\"></a></blockquote><script async src=\"http://platform.twitter.com/widgets.js\" charset=\"utf-8\"></script>"
    end

  end

end

Look at the lib/markdown_videos/services/service_base.rb for more details.

TODO

  • Add more services

Contribute

  • Fork the project
  • Clone the project locally git clone ...
  • Add upstream repo git remote add upstream https://github.com/capripot/markdown_videos.git
  • Create a new branch from master git checkout -b my_contribution
  • Code
  • git rebase master on your branch
  • Make sure bundle exec rubocop and bundle exec rspec are passing
  • Create a Pull Request against upstream/master on GitHub

Want to add a service?

Do above process and also, more specifically:

  • Add the service in lib/markdown_videos/services.rb
  • Add tests to lib/service_tests.rb
  • Name your branch add_service_name_service replacing service_name
  • Add the service to this README.md file

Boring legal stuff

Licensed under LGPL v3.0

Copyright (c) 2016 Ronan Potage and contributors

About

Make markdown image syntax more powerful: embed anything

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages