【Laravel+Breeze】テストでユーザー認証が必要なときの書きかた（備忘録）

<script>
MathJax = {
  loader: {load: ["input/tex", "output/svg"]}
};
MathJax = {
  svg: {
    scale: 1,                      // global scaling factor for all expressions
    minScale: .001,                  // smallest scaling factor to use
    mtextInheritFont: false,       // true to make mtext elements use surrounding font
    merrorInheritFont: true,       // true to make merror text use surrounding font
    mathmlSpacing: false,          // true for MathML spacing rules, false for TeX rules
    skipAttributes: {},            // RFDa and other attributes NOT to copy to the output
    exFactor: .5,                  // default size of ex in em units
    displayAlign: 'left',        // default for indentalign when set to 'auto'
    displayIndent: '0',            // default for indentshift when set to 'auto'
    fontCache: 'local',            // or 'global' or 'none'
    localID: null,                 // ID to use for local font cache (for single equation processing)
    internalSpeechTitles: true,    // insert <title> tags with speech content
    titleID: 0                     // initial id number to use for aria-labeledby titles
  }
};
</script>

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-svg.js"></script>

<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>
<link rel="stylesheet" href="mjsvgoutput.css"  type="text/css">

    <p class="index">latex数式</p>
    <textarea id="equation" name="equation" rows="10" cols="30">\int_0^1 x^2\enspace dx</textarea>
    <p class="index">数式</p>
    <div id="latex_equation">$$\int_0^1 x^2\enspace dx$$</div>
    <div class="button_wrapper">
      <button type="button" id="svg_save" class="button" name="svg_save">SVGファイルをダウンロード</button>
      <button type="button" id="clipboard_copy" class="button" name="clipboard_copy">クリップボードにコピー</button>
    </div>
    <div id="message"></div>
    <textarea id="svg_code" name="equation" rows="10" cols="80">ここにSVGのコードが出力されます。</textarea>

$('#equation').on('keyup', function() {

  let input = $('#equation').val();

  $('#latex_equation').html('$$'+input+'$$');

  MathJax.typesetPromise();

  let svg_code = $('#latex_equation').html();

svg_code = 

'<mjx-container class="MathJax CtxtMenu_Attached_0" jax="SVG" display="true" justify="left" role="presentation" tabindex="0" ctxtmenu_counter="2" style="position: relative;"><svg ~> ・・・・・ </svg><mjx-assistive-mml role="presentation" unselectable="on" display="block"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><msubsup><mo data-mjx-texclass="OP">∫</mo><mn>0</mn><mn>1</mn></msubsup><msup><mi>x</mi><mn>2</mn></msup><mstyle scriptlevel="0"><mspace width=".5em"></mspace></mstyle><mi>d</mi><mi>x</mi></math></mjx-assistive-mml></mjx-container>'

  svg_code = svg_code.match(/<svg(.*)svg>/g);

  $('#svg_code').text(svg_code);

$('#svg_save').on('click', function() {

  let svg_code = $('#latex_equation').html();
  svg_code = svg_code.match(/<svg(.*)svg>/g);

  svg_code = svg_code[0].replace(/<svg.*width="\d+(\.\d+)?ex" height="\d+(\.\d+)?ex"/g, '<svg xmlns="http://www.w3.org/2000/svg" width="210mm" height="297mm"');
  svg_code = svg_code.replace(/<svg.*?>/g, '$&<g transform="scale(0.1)">');
  svg_code = svg_code.replace(/<\/svg>/g, '</g>$&');

  svg_code = svg_code.replace(/<\/svg>/g, '</g>$&');

  let blob = new Blob([svg_code],{type:"image/svg+xml"});

  let link = document.createElement('a');

  link.href = URL.createObjectURL(blob);

  let date_obj = new Date();
  let milliseconds = date_obj.getTime();

  link.download = 'svg'+milliseconds+'.svg';

  link.click();

  $('#message').text('SVGファイルをダウンロードしました。').show();
  let message_hide = function() {
    $('#message').text('');
  }
  setTimeout(message_hide, 2000);

$('#clipboard_copy').on('click', function() {

  $('#svg_code').select();

  document.execCommand('copy');

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>【Inkscape対応】latex数式SVG抽出保存ツール</title>
<script>
MathJax = {
  loader: {load: ["input/tex", "output/svg"]}
};
MathJax = {
  svg: {
    scale: 1,                      // global scaling factor for all expressions
    minScale: .001,                  // smallest scaling factor to use
    mtextInheritFont: false,       // true to make mtext elements use surrounding font
    merrorInheritFont: true,       // true to make merror text use surrounding font
    mathmlSpacing: false,          // true for MathML spacing rules, false for TeX rules
    skipAttributes: {},            // RFDa and other attributes NOT to copy to the output
    exFactor: .5,                  // default size of ex in em units
    displayAlign: 'left',        // default for indentalign when set to 'auto'
    displayIndent: '0',            // default for indentshift when set to 'auto'
    fontCache: 'local',            // or 'global' or 'none'
    localID: null,                 // ID to use for local font cache (for single equation processing)
    internalSpeechTitles: true,    // insert <title> tags with speech content
    titleID: 0                     // initial id number to use for aria-labeledby titles
  }
};
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-svg.js"></script>
<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>
<link rel="stylesheet" href="mjsvgoutput.css"  type="text/css">
</head>
<body>
<div class="container">
  <header>【Inkscape対応】latex数式SVG抽出保存ツール</header>
  <article>
    <p class="index">latex数式</p>
    <textarea id="equation" name="equation" rows="10" cols="30">\int_0^1 x^2\enspace dx</textarea>
    <p class="index">数式</p>
    <div id="latex_equation">$$\int_0^1 x^2\enspace dx$$</div>
    <div class="button_wrapper">
      <button type="button" id="svg_save" class="button" name="svg_save">SVGファイルをダウンロード</button>
      <button type="button" id="clipboard_copy" class="button" name="clipboard_copy">クリップボードにコピー</button>
    </div>
    <div id="message"></div>
    <textarea id="svg_code" name="equation" rows="10" cols="80">ここにSVGのコードが出力されます。</textarea>
  </article>
  <footer>2021 Powered by <a href="https://www.mmsankosho.com">mm参考書</a></footer>
</div>
<script>
$('#equation').on('keyup', function() {
  let input = $('#equation').val();
  $('#latex_equation').html('$$'+input+'$$');
  MathJax.typesetPromise();
  let svg_code = $('#latex_equation').html();
  svg_code = svg_code.match(/<svg(.*)svg>/g);
  $('#svg_code').text(svg_code);
});
$('#svg_save').on('click', function() {
  let svg_code = $('#latex_equation').html();
  svg_code = svg_code.match(/<svg(.*)svg>/g);
  svg_code = svg_code[0].replace(/<svg.*width="\d+(\.\d+)?ex" height="\d+(\.\d+)?ex"/g, '<svg xmlns="http://www.w3.org/2000/svg" width="210mm" height="297mm"');
  svg_code = svg_code.replace(/<svg.*?>/g, '$&<g transform="scale(0.1)">');
  svg_code = svg_code.replace(/<\/svg>/g, '</g>$&');
  let blob = new Blob([svg_code],{type:"image/svg+xml"});
  let link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  let date_obj = new Date();
  let milliseconds = date_obj.getTime();
  link.download = 'svg'+milliseconds+'.svg';
  link.click();
  $('#message').text('SVGファイルをダウンロードしました。').show();
  let message_hide = function() {
    $('#message').text('');
  }
  setTimeout(message_hide, 2000);
});
$('#clipboard_copy').on('click', function() {
  $('#svg_code').select();
  document.execCommand('copy');
  $('#message').text('クリップボードにSVGコードがコピーされました。').show();
  let message_hide = function() {
    $('#message').text('');
  }
  setTimeout(message_hide, 2000);
});
</script>
</body>
</html>

body {
    display: flex;
    justify-content: center;
    font-family: YuGothic, 'Yu Gothic', sans-serif;
    font-size: 18px;
    font-weight: 500;
}
p {
    margin: 0 0 0 1rem;
}
.index {
    font-weight: 700;
}
.container {
    width: 680px;
    background-color: #f2f2f2;
    padding: 0.5rem;
}
#equation {
    width: 94%;
    margin: 0 0 0 1rem;
}
#latex_equation {
    display: block;
    width: 100%;
    height: 100px;
    margin: 0 1rem 0 1rem;
}
.button_wrapper {
    display: flex;
    justify-content: space-around;
    margin: 0.5rem;
}
#svg_save {
    flex-basis: 45%;
}
#clipboard_copy {
    flex-basis: 45%;
}
.button {
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    background: #668ad8;/*ボタン色*/
    color: #FFF;
    border-bottom: solid 4px #627295;
    border-radius: 3px;
    font-weight: 700;
}
#message {
    display: block;
    height: 1.5rem;
    font-size: 0.75rem;
    padding-left: 1rem;
}
#svg_code {
    width: 94%;
    margin: 0 0 0 1rem;
}
footer {
    text-align: right;
}