Mardown 표현에 대한 공식 변환 도구가 제작되었으므로

17812 단어 JavaScript

이런 걸 만들었어요.



Qiita, Kibela, 손으로 쓴 블로그의 글에 공식을 삽입하고 싶을 때가 있다.
이를테면 Qita 글에 공식을 넣어 글을 쓰고, 키베라도 같은 내용과 공식을 사용해 글을 쓰길 원한다.
이렇게 생각할 때는 서로 다른 서비스 양식에 따라 공식을 다시 쓸 필요가 있다.
Qita에는 Qita의 공식적인 문법이 있고, Kibela에는 Kibela의 문법이 있다...스케줄러:얼마나 귀찮은데...
이런 번거로운 숙제를 없애기 위해 공식 변환 도구를 만들었으니 꼭 사용하시기 바랍니다.
▽github.io에서 공개 (※ 스마트폰으로 붕괴)
https://hikariyamasaki.github.io/markdown_Formula/
GiitHub 창고 여기 있습니다.
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;
  }
}

사고의 절차


모든 문법에는 다음과 같은 규칙이 있다.
[공식적으로 시작된 문구]
Qita의 문법
키벨라의 문법~~~{latex}
블로그 구문[tex]
[공식적으로 끝나는 문구]
Qita의 문법
키벨라의 문법
블로그 구문
예를 들어 Qita 포맷으로 쓴 텍스트를 키벨라 포맷으로 변환하고자 하는 경우 입력한 텍스트에 @math 같은 문자열이 있으면 ~ ~ ~ {latex}이런 문자열이 있으면 ~로 변환합니다.
그러면 입력한 텍스트의 모든'math를 ~~~{latex}로 바꾸고'모든 것을 ~~~로 바꿉니다.자바스크립트 replace로 한번에 오케이!
그렇게 생각할 수도 있지만 이렇게 하면 아래의 교재가 좋지 않다.
　　　```javascript
　　　fuga
　　　```
　　　```math
　　　hogehoge
　　　```
　　　text text text text.
　　　```math
　　　hogehoge
　　　```
예를 들어 이러한 텍스트는 모든'math가 바뀐 후에 나머지 `를 바꾸려고 해도 어느 `가'math와 함께 구성되었는지 모르기 때문에 바꿀 필요가 없는javascript의 시종 기호를 바꿀 수 있다.
따라서 교체를 실행할 때, 교체된 'math를 ~~로 바꾸어야 한다.
Qita→Kibela라면 위에서 이루어진 것이지만 Qita→자동 블로그, Kibela→Qita, Kibela→자동 블로그입니다.
임의로 변환된 문자열을 바꾸기만 하면 그 다음의 실현 절차는 같다.

과제.


이번 실시 방식에서는 공식이 문장에 삽입된 문자열을 변환할 수 없습니다.
그리고 블로그→{Qita,kibera}의 전환이 아직 이루어지지 않았기 때문에 반드시 저에게 방법을 알려주세요.
★ 공식 변환 도구의 창고는 여기 ★
또한 이러한 전환 서비스에 이미 존재하는 유력한 정보가 있다면 꼭 알려주세요.
끝맺다
C. Boboniu and Bit Operations(664 div2 비트 연산/dp)
Laravel, Vue 3 및 Tailwind를 사용하여 프로젝트 템플릿 만들기 - 섹션 2

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage