Markdown PDF를 마 개조하여 출력을 좋은 느낌으로 한다

Visual Studio Code 의 확장 기능 Markdown PDF 은 매우 편리합니다만, 그대로는 표지를 만들 수 없거나, 이미지나 표에 캡션을 붙일 수 없는 등 리포트를 작성하기에는 적합하지 않습니다. 그러나 TEX와 Word를 사용하는 것은 번거롭기 때문에 Markdown으로 쓸 수 있다면 Markdown으로 쓰고 싶은 곳입니다. 그래서 이 확장 기능을 개조하여 부족한 기능을 추가하기로 했습니다.
샘플은 이쪽

1. 이미지·표에 캡션을 붙여 번호를 자동으로 흔들도록 한다

.vscode/extensions/yzane.markdown-pdf-1.4.4/node_modules/markdown-it/lib/renderer.js의Renderer.prototype.renderToken 를 다음과 같이 다시 씁니다.

renderer.js

Renderer.prototype.renderToken = function renderToken(tokens, idx, options) {
  var nextToken,
      result = '',
      needLf = false,
      token = tokens[idx];

  // Tight list paragraphs
  if (token.hidden) {
    return '';
  }

  // Insert a newline between hidden paragraph and subsequent opening
  // block-level tag.
  //
  // For example, here we should insert a newline before blockquote:
  //  - a
  //    >
  //
  if (token.block && token.nesting !== -1 && idx && tokens[idx - 1].hidden) {
    result += '\n';
  }

  if (token.tag === 'img') {
    result += '<figure class=image>\n';
  }

  // Add token name, e.g. `<img`
  result += (token.nesting === -1 ? '</' : '<') + token.tag;
  if (token.nesting === -1 && token.tag === 'table') {
    TableCaption = true;
  }

  if (TableCaption) {
    result += ' class=caption';
  }

  // Encode attributes, e.g. `<img src="foo"`
  result += this.renderAttrs(token);

  // Add a slash for self-closing tags, e.g. `<img src="foo" /`
  if (token.nesting === 0 && options.xhtmlOut) {
    result += ' /';
  }

  // Check if we need to add a newline after this tag
  if (token.block) {
    needLf = true;

    if (token.nesting === 1) {
      if (idx + 1 < tokens.length) {
        nextToken = tokens[idx + 1];

        if (nextToken.type === 'inline' || nextToken.hidden) {
          // Block-level tag containing an inline tag.
          //
          needLf = false;

        } else if (nextToken.nesting === -1 && nextToken.tag === token.tag) {
          // Opening tag + closing tag of the same type. E.g. `<li></li>`.
          //
          needLf = false;
        }
      }
    }
  }

  result += needLf ? '>\n' : '>';

  if (token.tag === 'img') {
    result += '\n<figcaption>' + '図' + (++imageCount) + '. ' + token.attrs[token.attrIndex('alt')][1] + '</figcaption>\n'
    result += '</figure>';
  }

  if (result === '<p class=caption>') {
    result += '表' + (++tableCount) + '. ';
    TableCaption = false;
  }

  return result;
};

번호를 자동으로 흔들기 위해 전역적으로 이러한 변수를 정의하고,

var imageCount   = 0;
var tableCount   = 0;
var TableCaption = false;

function Renderer() 안에

  imageCount = 0;
  tableCount = 0;

를 추가합니다.

또한 .vscode/extensions/yzane.markdown-pdf-1.4.4/styles/markdown.css
markdown.css

.image {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.caption {
    text-align: center;
}

그리고 추가합니다.

이제 이미지의 alt 요소와 </table> 바로 뒤의 <p> 요소가 캡션 문자열로 처리됩니다.
예를 들어, 이 코드는

sumple.md

![ジュース1](img/juice.jpg)
![ジュース2](img/juice.jpg)

||1|
|-|-|
|1|1|
1マス計算1

||1|
|-|-|
|1|1||
1マス計算2

이렇게 출력됩니다.

2. 수식을 쓸 수 있도록 한다

Mathjax를 소개합니다..vscode/extensions/yzane.markdown-pdf-1.4.4/template/template.html
template.html

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/x-mathjax-config">
    MathJax.Hub.Config({ 
      tex2jax: {
        inlineMath: [['$', '$']],
      }, 
      messageStyle: "none",
      TeX: {
        equationNumbers: {
          autoNumber: "AMS"
        }
      }
    });
</script>

를 추가합니다.
그러면 다음 코드가

sumple2.md

$O(\log n)$  

$$
\begin{equation}
\int(\log x)dx = \frac{1}{x} + C
\end{equation}
$$ 

$O(\log n)$

$$
\begin{equation}
\int(\log x)dx =\frac{1}{x} + C
\end{equation}
$$

로 출력됩니다. (아래의 식에는 식 번호가 붙습니다)

3. 표지를 만드는

# 를 메인 타이틀로 취급합니다. 기타 표지에 필요한 요소도 좋은 느낌으로 출력되도록합니다..vscode/extensions/yzane.markdown-pdf-1.4.4/styles/markdown.css
markdown.css

h1{
  text-align: center;
  font-size: 4em;
}

.subtitle {
    margin-top: 3em;
    font-size: 3em;
    text-align: center;
}

.cover {
    margin-top: 3em;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 2em;
    page-break-after: always;
}

추가하면 다음 코드가

sumple3.md

# Main Title

<div class=subtitle>Sub Title</div>
<div class=cover>
<p> 日付: 1970/1/1 </p>
<p> 報告者氏名: ugis </p>
</div>

이렇게 출력됩니다. cover 클래스를 가진 div 요소로 페이지 나누기가 들어가기 때문에 이것이 그대로 표지가 됩니다. 1



이것에 관해서는 더 좋은 방법이 있을 것 같기 때문에, 아는 분은 가르쳐 주시면 기쁩니다. ↩