grunt-browser-mdbagde

Simple grunt task that generates MarkDown formatted Browser Compatibility Tables from JSON data.

Icons designed by Freepik

Install

$> npm install grunt-browser-mdbagde --save-dev

Add it to your MD file

To add the badge code to your MD, insert the next comment into your MD source:

<!--browser-badge-->

Configure and run task

grunt.loadNpmTasks('grunt-browser-mdbadge');

grunt.initConfig({
	browser-badge":{
		basic:{
			src:'./README.md', // <-- No dest specified, src will be overwritten
			browsers:'./browsers.json'
		},
		customDestination: {
			src:'./README.md',
			dest:'./README_badge.md', // <-- Specify a destination file
			browsers:'./browsers.json'
		},
		inlineData: {
			src:'./README_inline.md',  // <-- No dest specified, src will be overwritten
			browsers:{
				"explorer" : { "12.0" : false, "8.0" : false, "9.0" : false },
				"firefox" : { "10.0" : true, "11.0" : true, "12.0" : false, "13.0" : true, "nightly" : true },
				"chrome" : { "14.0" : true, "15.0" : true, "16.0" : true, "canary" : true },
				"safari" : { "5.0.5" : false, "5.1.0" : false, "5.1.1" : true },
				"opera" : { "10.6" : false, "11.0" : false, "11.6" : false },
				"iphone": { "6.0" : true },
				"ipad": { "6.0" : true },
				"android-chrome": { "20.0" : true },
				"android-browser": { "4.2" : true }
			}
		},
		icons: {
			src:'./README_icons.md',
			browsers:{
				"explorer" : { "12.0" : false, "8.0" : false, "9.0" : false },
				"firefox" : { "10.0" : true, "11.0" : true, "12.0" : false, "13.0" : true, "nightly" : true },
				"chrome" : { "14.0" : true, "15.0" : true, "16.0" : true, "canary" : true },
				"safari" : { "5.0.5" : false, "5.1.0" : false, "5.1.1" : true },
				"opera" : { "10.6" : false, "11.0" : false, "11.6" : false },
				"iphone": { "6.0" : true },
				"ipad": { "6.0" : true },
				"android-chrome": { "20.0" : true },
				"android-browser": { "4.2" : true }
			},
			icons:[
				"ie",
				"firefox",
				"chrome",
				"safari",
				"opera",
				"ios",
				"ios",
				"android chrome", // <-- Multiple icons allowed
				"windows firefox"
			]
		}
	}
});

Icons Avaliable

• ie
• chrome
• firefox
• opera
• safari
• ios
• android
• windows

Badge Example

Basic

explorer|firefox|chrome|safari|opera|iphone|ipad|android-chrome|android-browser ---|---|---|---|---|---|---|---|--- ⛔ 152.0 | ✅ 10.0 | ✅ 14.0 | ⛔ 5.0.5 | ⛔ 10.6 | ✅ 6.0 | ✅ 6.0 | ✅ 20.0 | ✅ 4.2 ⛔ 8.0 | ✅ 11.0 | ✅ 15.0 | ⛔ 5.1.0 | ⛔ 11.0 | | | | ⛔ 9.0 | ⛔ 12.0 | ✅ 16.0 | ✅ 5.1.1 | ⛔ 11.6 | | | | | ✅ 13.0 | ✅ canary | | | | | | | ✅ nightly | | | | | | |

Width Icons

||||||| | ---|---|---|---|---|---|---|---|--- ⛔ 12.0 | ✅ 10.0 | ✅ 14.0 | ⛔ 5.0.5 | ⛔ 10.6 | ✅ 6.0 | ✅ 6.0 | ✅ 20.0 | ✅ 4.2 ⛔ 8.0 | ✅ 11.0 | ✅ 15.0 | ⛔ 5.1.0 | ⛔ 11.0 | | | | ⛔ 9.0 | ⛔ 12.0 | ✅ 16.0 | ✅ 5.1.1 | ⛔ 11.6 | | | | | ✅ 13.0 | ✅ canary | | | | | | | ✅ nightly | | | | | | |