Leo He

Markdown support

Markdig is used as the Markdown processor and the following markdown features are enabled by default:

• Pipe tables
• Emphasis extras
• Media links
• Generic attributes

Tables

How to create the following table with styling, using pipe tables and generic attributes.

{.table .table-striped}
|Company|Contact|Country|
|-|-|-|
|Alfreds Futterkiste|Maria Anders|Germany|
|Centro comercial Moctezuma|Francisco Chang|Mexico|
|Ernst Handel|Roland Mendel|Austria|
|Island Trading|Helen Bennett|UK|

Using CSS

How to create the following blockquote with an bootstrap info-alert style, using generic attributes.

Normally the dangers inherent in the diverse hardware environment enhances the efficiency of the inductive associative dichotomy on a strictly limited basis.

{.alert .alert-info}
> Normally the dangers inherent in the diverse hardware environment enhances the efficiency of the inductive associative dichotomy on a strictly limited basis.

Resize Image

Resizing image is supported by Markdig, using below attribute syntax to resize an image.

![](http://example.com/image.jpg){width=250 height=120}

Resize image

Compress an image by using the Canvas. in my case the original image is dataurl, you also can use other type image source, like image object or blob object.

// compress given data url and return a new compressed dataUrl 
function compress(dataUrl, scale, callback) {
	var s = parseFloat(scale);
	// check scale, make sure it is in 0-1;
	if (isNaN(s) || s < 0 || s >= 1) {
		callback(dataUrl)
	}
	
	// using canvas compress image
	var canvas = document.createElement('canvas');
	var context = canvas.getContext('2d');

	img.onload = function () {
		// calculate target width and height
		var targetWidth = img.width * s;
		var targetHeight = img.height * s;
		// set canvas width and height
		canvas.width = targetWidth;
		canvas.height = targetHeight;
		// clear canvas
		context.clearRect(0, 0, targetWidth, targetHeight);
		// draw image
		context.drawImage(img, 0, 0, targetWidth, targetHeight);
		// convert canvas to dataurl
		callback(canvas.toDataURL());
	}

	img.src = dataUrl;
}

Resize SVG

it is very easy to resize the svg, just change the size of viewport.
original svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="441pt" height="358pt" viewBox="0 0 441 358" version="1.1">
<g id="surface6">
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 0.875117 1.494473 L -0.00832031 2.004199 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 0.875 1.686973 L 0.15832 2.100449 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 1.730313 3.009434 L 1.730313 1.998887 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 1.563633 2.913418 L 1.563633 2.09502 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 0.0000000000745058 1.989746 L 0.0000000000745058 3.014004 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 1.738633 2.00373 L 0.858438 1.494473 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M -0.00839844 2.999551 L 0.877305 3.504082 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 0.158242 2.902676 L 0.876563 3.311855 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 0.860703 3.50416 L 1.738594 2.99502 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 1.721953 2.00373 L 2.604883 1.494512 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 2.596172 0.488965 L 2.596563 1.499316 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 2.762891 0.585215 L 2.763203 1.402988 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 4.335781 0.504668 L 3.451953 -0.00478516 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 4.169375 0.601113 L 3.451992 0.187598 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 2.588242 1.494512 L 3.475586 2.006035 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 3.468594 -0.00478516 L 2.587852 0.503418 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 3.458828 2.006074 L 4.33832 1.490723 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 3.458164 1.81334 L 4.171406 1.395371 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 4.330078 1.505137 L 4.327422 0.490293 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
</g>
</svg>

You can see, the image is very big, now we change the size of viewport to 100 and 100

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100pt" height="100pt" viewBox="0 0 441 358" version="1.1">
...
</svg>

Later I will use javascript code to modify the size of viewport.