Showdown Markdown Editor:如何调整图像大小以适应内容?
Showdown Markdown Editor: How to resize images to fit in with the content?
我正在尝试使用 stack over flows markdown 编辑器 showdown by its Angularjs Module ng-showdown
一切正常,但包含的图像尺寸为 actual/original。
如何调整它们的大小以适合文本?
下面给出的是一个显示相同问题的假人。
非常感谢!!!
<html ng-app="theShowdown">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.2.1/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.3.0/showdown.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-showdown/1.1.0/ng-showdown.min.js"></script>
<script>
var theShowdown = angular.module('theShowdown', ['ngRoute', 'ngSanitize', 'ngAnimate', 'ui.bootstrap', 'ng-showdown']);
theShowdown.config(function() {
})
theShowdown.controller('theMain', function($scope, $showdown) {
$scope.mymarkdown = `**Hello** _Stackover Flow_ ![Showdown][sd-logo]
[sd-logo]: http://logz.io/wp-content/uploads/2016/02/stack-overflow-logo.png`;
var htmlValue = $showdown.makeHtml($scope.mymarkdown)
})
</script>
</head>
<body ng-controller="theMain">
<p markdown-to-html="mymarkdown"></p>
<textarea rows="4" cols="150" ng-model="mymarkdown"></textarea>
</body>
</html>
终于找到方法了
在为 link 声明 URL 时添加 abc.png =100x*
,这会将高度设置为 100,宽度将自动计算。
免责声明:
我是本次对决的项目负责人
parseImgDimensions: (boolean) [default false] Enable support for setting image dimensions from within markdown syntax. Examples:
![foo](foo.jpg =100x80) simple, assumes units are in px
![bar](bar.jpg =100x*) sets the height to "auto"
![baz](baz.jpg =80%x5em) Image with width of 80% and height of 5em
所以你需要启用选项parseImgDimensions然后使用上面的语法。
例子
在构造函数中传递选项:
var converter = new showdown.Converter({parseImgDimensions: true});
或
var converter = new showdown.Converter();
converter.setOption('parseImgDimensions', true);
我正在尝试使用 stack over flows markdown 编辑器 showdown by its Angularjs Module ng-showdown
一切正常,但包含的图像尺寸为 actual/original。
如何调整它们的大小以适合文本?
下面给出的是一个显示相同问题的假人。
非常感谢!!!
<html ng-app="theShowdown">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.2.1/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.3.0/showdown.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-showdown/1.1.0/ng-showdown.min.js"></script>
<script>
var theShowdown = angular.module('theShowdown', ['ngRoute', 'ngSanitize', 'ngAnimate', 'ui.bootstrap', 'ng-showdown']);
theShowdown.config(function() {
})
theShowdown.controller('theMain', function($scope, $showdown) {
$scope.mymarkdown = `**Hello** _Stackover Flow_ ![Showdown][sd-logo]
[sd-logo]: http://logz.io/wp-content/uploads/2016/02/stack-overflow-logo.png`;
var htmlValue = $showdown.makeHtml($scope.mymarkdown)
})
</script>
</head>
<body ng-controller="theMain">
<p markdown-to-html="mymarkdown"></p>
<textarea rows="4" cols="150" ng-model="mymarkdown"></textarea>
</body>
</html>
终于找到方法了
在为 link 声明 URL 时添加 abc.png =100x*
,这会将高度设置为 100,宽度将自动计算。
免责声明:
我是本次对决的项目负责人
parseImgDimensions: (boolean) [default false] Enable support for setting image dimensions from within markdown syntax. Examples:
![foo](foo.jpg =100x80) simple, assumes units are in px ![bar](bar.jpg =100x*) sets the height to "auto" ![baz](baz.jpg =80%x5em) Image with width of 80% and height of 5em
所以你需要启用选项parseImgDimensions然后使用上面的语法。
例子
在构造函数中传递选项:
var converter = new showdown.Converter({parseImgDimensions: true});
或
var converter = new showdown.Converter();
converter.setOption('parseImgDimensions', true);