LoginSignup
7

More than 3 years have passed since last update.

Markdown表記での数式の変換ツール作ったのでぜひ使ってもらいたい

Last updated at Posted at 2019-10-21

こんなものを作りました

5484bb87d9f5fc356303b26eeb204b98.gif

Qiita、Kibela、はてなブログで書く記事のなかに数式を埋め込みたいという時があります。
例えばQiita記事の中に数式をおりこんで記事をかいたとして、Kiberaでも同じ内容や数式を使って記事を書きたい。
そう思いたった時、それぞれのサービスに合わせたフォーマットで数式を書き直す必要があります。

QiitaにはQiitaの数式の書き方があるし、、KibelaにはKibelaの書き方がある。。。(なんて面倒なの・・・)

そういった面倒な作業をなくすための数式変換ツールを作成したので、ぜひ使っていただけたらと思います。

▽github.ioで公開しています▽(※スマホでは崩れます。)
https://hikariyamasaki.github.io/markdown_Formula/

▽GitHubレポジトリはこちら▽
https://github.com/hikariyamasaki/markdown_Formula

ソースコード

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Formula</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
    <div>
      <div data-role="header"></div>
      <div class="content-wrapper">
        <div class="content">
          <div>
            <h1 class="title">Formula</h1>
          </div>
          <div class="code">
            <form id="inputform">
              <textarea id="input"></textarea>
            </form>
          </div>
          <div class="code-format">
            <form name="source">
                <select name="source">
                  <option value="qiita">Qiita</option>
                  <option value="kibela">Kibela</option>
                  <!-- <option value="hatena">はてなブログ</option> -->
                </select>
              </form>
              <p><img src="./svg/autorenew.svg" class="icon-autorenew"></p>
              <form name="target">
                <select name="target">
                  <option value="qiita">Qiita</option>
                  <option value="kibela">Kibela</option>
                  <option value="hatena">はてなブログ</option>
                </select>
              </form>
              <button id="change" onclick="transform_text()">変換</button>
          </div>
          <div class="code">
              <form id="outputform">
                <textarea id="output"></textarea>
              </form>
          </div>
        </div>
     /* サイドは省略 */
    </div>
  </body>
</html>
script.js
function checkFormat(value, source, target){
  if(value.match(source.start)) {
    var preresult = value.replace(source.start, target.start);

    var index = value.indexOf(source.start);
    value = value.slice(index + source.start.length + 1);

    if(preresult.match(source.end)) {
      var result = value.replace(source.end, target.end);
    }

    var preresult = preresult.slice(0, index+target.start.length+1);
    document.getElementById("output").value = preresult + result;
    return preresult + result;
  }
  return false;
}

function transformation(source, target) {
  var inputValue = document.getElementById("input").value ;

  if(!inputValue) {
    alert("値を入力してください");
  } else {
    var value = inputValue;

    const count_max=100;
    for(let i=0; i < count_max; i++){
      value = checkFormat(
        value,
        source,
        target
      );
      if(!value) break;
    }
  }
}

function transform_text(){
  var source_type = document.source.source.value;
  var target_type = document.target.target.value;

  let source = getFormat(source_type);
  let target = getFormat(target_type);

  transformation(source, target);
}

function getFormat(texttype) {
  switch(texttype) {
    case 'qiita':
    return {start: "```math", end:"```"};
    break;
    case 'kibela':
    return {start: "~~~{latex}" , end: "~~~"};
    break;
    case 'hatena':
    return {start: "[tex:", end: "]"};
    break;
  }
}

考えた手順

それぞれの文法には以下のルールがあります。
【数式開始の文言】
Qiitaの文法 ```math
Kibelaの文法 ~~~{latex}
はてなブログの文法 [tex:

【数式終了の文言】
Qiitaの文法 ```
Kibelaの文法 ~~~
はてなブログの文法 ]

考え方としては、例えば、Qiitaのフォーマットで書いたテキストをKibelaフォーマットに変換したい場合、入力したテキストの中に```mathという文字列があれば、~~~{latex}へ変換。```という文字列があれば~~~へ変換する、という考え方です。

では、入力したテキスト中の全ての```math~~~{latex}に置換して、そして同じように```~~~へ全置換しよう。JavaScriptのreplaceを使えば一発OK!

そう考えてしまうかもしれませんが、このやり方だと以下のようなテキストの場合うまくいきません。



   ```javascript
   fuga
   ```

   ```math
   hogehoge
   ```
   text text text text.
   ```math
   hogehoge
   ```


例えば、このようなテキストの場合、全ての```mathを置換してしまったあと、残りの```を置換しようとしても、どの``````mathとセットになっているものかわからないため、置換する必要がないjavascriptの終始記号をも置換してしまいます。

そのため、置換を実行する時は、```mathを置換し、そのあとに現れる```~~~に置換するという実装にする必要があります。
Qiita→Kibelaであれば上の実装ですが、Qiita→はてなブログ、Kibela→Qiita、Kibela→はてなブログ。
どの変換も置換する文字列が違うだけで、あとの実装の流れは一緒です。

課題

今回の実装では、文中に数式を埋め込む文字列の変換が実装できていません。
そしてはてなブログ→{Qiita, Kibera}の変換がまだ実装できていないのでぜひやり方をおしえて欲しいです。。

★数式変換ツールのレポジトリはこちら★

また、このような変換サービスが既存であるよなどの有力情報があればぜひ教えてほしいです。

おわり

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7