フラミナル

考え方や調べたことを書き殴ります。IT技術系記事多め

トップ > Remark > Remarkで画像サイズを変更して貼り付ける方法

Remarkで画像サイズを変更して貼り付ける方法

Remark Markdown

f:id:lirlia:20180821142539j:plain

シンプルです。

HTMLコードで書くだけです。

<img src="xxx.jpg" width="500px height=500px">

マクロを作る方法

こちらのissueで話題に上がっていた方法です。

HTMLコードではなくMarkdownぽく書くやり方。

<!DOCTYPE html>
<html>
  <head>
    <title>Remark Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" type="text/css" href="remark-demo.css">
  </head>
  <body>
    <script type="text/javascript" src="http://gnab.github.io/remark/downloads/remark-latest.min.js"></script>
    <script type="text/javascript">
      var hljs = remark.highlighter.engine;
    </script>
    <script type="text/javascript" src="remark.language.js"></script>
    <script type="text/javascript"> 
      remark.macros.scale = function (percentage) {
        var url = this;
        return '<img src="' + url + '" style="width: ' + percentage + '" />';
        // Usage:
        //   ![:scale 50%](image.jpg)
   // Outputs:
   //   <img src="image.jpg" style="width: 50%" />
      };
      var slideshow = remark.create({
        sourceUrl: 'mango.md',
        highlightStyle: 'monokai',
        highlightLanguage: 'remark'
      });
    </script>
  </body>
</html>

presentations/mango.html at 64cf0c3312723e5a689b2f6ee579c454768ad9a4 · davidonlaptop/presentations · GitHubより引用

      remark.macros.scale = function (percentage) {
        var url = this;
        return '<img src="' + url + '" style="width: ' + percentage + '" />';
        // Usage:
        //   ![:scale 50%](image.jpg)
    // Outputs:
    //   <img src="image.jpg" style="width: 50%" />
      };

を追加していますね。

使い方

![:scale 50%](image.jpg)

Markdownで上記の入力するとHTML上は以下のようになります。

<img src="image.jpg" style="width: 50%" />