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