質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
RubyGems

RubyGemsはRubyによるプログラミングのためのパッケージマネジメントツールです。ユーザはこれを使用することで、Rubyライブラリのダウンロードやアップデートや、依存関係の自動解決が可能になります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ruby on Rails 4

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

LaTeX

LaTeXは、レスリー・ランポートが開発したテキストベースの文書整形システムです。 電子製版ソフトウェアである「TeX」にマクロパッケージを組み込む形で構成されており、 通常のTeXより扱いやすくなっているのが特徴です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

2回答

2788閲覧

mathjax-rails による数式の表示をされている方はおられますか?各ファイルの設定(application.html.erb, route.rbなど)など教えてください

shocyu

総合スコア17

RubyGems

RubyGemsはRubyによるプログラミングのためのパッケージマネジメントツールです。ユーザはこれを使用することで、Rubyライブラリのダウンロードやアップデートや、依存関係の自動解決が可能になります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ruby on Rails 4

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

LaTeX

LaTeXは、レスリー・ランポートが開発したテキストベースの文書整形システムです。 電子製版ソフトウェアである「TeX」にマクロパッケージを組み込む形で構成されており、 通常のTeXより扱いやすくなっているのが特徴です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2015/10/01 05:36

ruby on rails にて技術的なブログを立ち上げようとしています。記事に数式を入れたいと思い、gemの mathjax-rails を bundle install してみました。

他のユーザーの投稿を見ましたところ、どうも app/views/layouts/application.html.erbの <head>タグにて定義されている turbolinks と <script>タグが拮抗しているらしく、うまく動作しない、という質問がありました。

すでに config/routes.rb 内に mathjax 'mathjax' と入力し、ルーティングも行っています。

また、mathjax-rails をアップしている github のページ(https://github.com/pmq20/mathjax-rails)の説明には、app/view/layouts/application.html.erb ファイル内に <%= mathjax_tag %> というタグを貼り付けるように、と指示されていますが、<head> タグ内か <body> タグ内か分かりません。

mathjax-rails の導入に成功した方がおられましたら教えてください。その際にはお手数ですが、application.html.erb ファイルのソースを公表いただける範囲でかまいませんので添付していただけますと助かります。

よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0


投稿2019/04/12 02:13

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

私も似たようなこと考えてました。
私は資金が枯渇してしまったんで
shocyuさんがブログ立ち上げたら教えてください。

一般的にMathJaxをRailsに導入する方法は
shocyuさんが試されたようで
私も試してみてうまくいきませんでした。
なので

application.html.erbを下記のようにしてます。

html

1<!DOCTYPE html> 2<head> 3 <meta charset="utf-8"> 4 <meta http-equiv="x-ua-compatible" content="ie=edge"> 5 <meta name="viewport" content="width=device-width"> 6 <title>MathJax v3 with TeX input and HTML output</title> 7 <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script> 8 <!--script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/mml-chtml.js"></script--> 9 10 <script> 11 MathJax = { 12 tex: {inlineMath: [['$', '$'], ['\(', '\)']]} 13 }; 14 </script> 15 <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script> 16 <script src="load-mathjax.js" defer></script> 17 18 <script> 19 function convert() { 20 // 21 // Get the TeX input 22 // 23 var input = document.getElementById("input").value.trim(); 24 // 25 // Disable the display and render buttons until MathJax is done 26 // 27 var display = document.getElementById("display"); 28 var button = document.getElementById("render"); 29 button.disabled = display.disabled = true; 30 // 31 // Clear the old output 32 // 33 output = document.getElementById('output'); 34 output.innerHTML = ''; 35 // 36 // Reset the tex labels (and automatic equation numbers, though there aren't any here). 37 // Get the conversion options (metrics and display settings) 38 // Convert the input to CommonHTML output and use a promise to wait for it to be ready 39 // (in case an extension needs to be loaded dynamically). 40 // 41 MathJax.texReset(); 42 var options = MathJax.getMetricsFor(output); 43 options.display = display.checked; 44 MathJax.tex2chtmlPromise(input, options).then(function (node) { 45 // 46 // The promise returns the typeset node, which we add to the output 47 // Then update the document to include the adjusted CSS for the 48 // content of the new equation. 49 // 50 output.appendChild(node); 51 MathJax.startup.document.clear(); 52 MathJax.startup.document.updateDocument(); 53 }).catch(function (err) { 54 // 55 // If there was an error, put the message into the output instead 56 // 57 output.appendChild(document.createElement('pre')).appendChild(document.createTextNode(err.message)); 58 }).then(function () { 59 // 60 // Error or not, re-enable the display and render buttons 61 // 62 button.disabled = display.disabled = false; 63 }); 64 } 65 </script> 66 <style> 67 #frame { 68 max-width: 40em; 69 margin: auto; 70 } 71 #input { 72 border: 1px solid grey; 73 margin: 0 0 .25em; 74 width: 100%; 75 font-size: 120%; 76 box-sizing: border-box; 77 } 78 #output { 79 font-size: 120%; 80 margin-top: .75em; 81 border: 1px solid grey; 82 padding: .25em; 83 min-height: 2em; 84 } 85 #output > pre { 86 margin-left: 5px; 87 } 88 .left { 89 float: left; 90 } 91 .right { 92 float: right; 93 } 94 </style> 95</head> 96<body> 97 <%= yield %> 98</body> 99</html>

上記で、MathJaxのscriptを設定して
下記で数式を表示するhtmlを書いてます。

html

1 <h1>MathJax v3 beta: TeX input, HTML output test</h1> 2 3 <p> 4 When $a \ne 0$, there are two solutions to (ax^2 + bx + c = 0) and they are 5 $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$ 6 </p> 7 8 <h2>The Lorenz Equations</h2> 9 10 <p> 11 \begin{align} 12 \dot{x} &amp; = \sigma(y-x) \ 13 \dot{y} &amp; = \rho x - y - xz \ 14 \dot{z} &amp; = -\beta z + xy 15 \end{align} 16 </p> 17 18 <h2>The Cauchy-Schwarz Inequality</h2> 19 20 <p>[ 21 \left( \sum_{k=1}^n a_k b_k \right)^{\!\!2} \leq 22 \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right) 23 ]</p> 24 25 <h2>A Cross Product Formula</h2> 26 27 <p>[ 28 \mathbf{V}_1 \times \mathbf{V}_2 = 29 \begin{vmatrix} 30 \mathbf{i} &amp; \mathbf{j} &amp; \mathbf{k} \ 31 \frac{\partial X}{\partial u} &amp; \frac{\partial Y}{\partial u} &amp; 0 \ 32 \frac{\partial X}{\partial v} &amp; \frac{\partial Y}{\partial v} &amp; 0 \ 33 \end{vmatrix} 34 ]</p> 35 36 <h2>The probability of getting (k) heads when flipping (n) coins is:</h2> 37 38 <p>[P(E) = {n \choose k} p^k (1-p)^{ n-k} ]</p> 39 40 <h2>An Identity of Ramanujan</h2> 41 42 <p>[ 43 \frac{1}{(\sqrt{\phi \sqrt{5}}-\phi) e^{\frac25 \pi}} = 44 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} 45 {1+\frac{e^{-8\pi}} {1+\ldots} } } } 46 ]</p> 47 48 <h2>A Rogers-Ramanujan Identity</h2> 49 50 <p>[ 51 1 + \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots = 52 \prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})}, 53 \quad\quad \text{for $|q| &lt; 1$}. 54 ]</p> 55 56 <h2>Maxwell's Equations</h2> 57 58 <p> 59 \begin{align} 60 \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} &amp; = \frac{4\pi}{c}\vec{\mathbf{j}} \ 61 \nabla \cdot \vec{\mathbf{E}} &amp; = 4 \pi \rho \ 62 \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} &amp; = \vec{\mathbf{0}} \ 63 \nabla \cdot \vec{\mathbf{B}} &amp; = 0 64 \end{align} 65 </p> 66 67 <h2>In-line Mathematics</h2> 68 69 <p>Finally, while display equations look good for a page of samples, the 70 ability to mix math and text in a paragraph is also important. This 71 expression $\sqrt{3x-1}+(1+x)^2$ is an example of an inline equation. As 72 you see, MathJax equations can be used this way as well, without unduly 73 disturbing the spacing between lines.</p> 74

余計なコードも入っちゃってすみません。
application.html.erbのscriptは
MathJaxのgithubを見ながら多少追記しました。
多分改善の余地があります。

shocyuさんが今後数式を扱ったブログを立ち上げる際に
下記ページは役に立つかもしれません。
https://cloudlatex.io/
https://colab.research.google.com/

投稿2020/05/05 11:19

JironBach

総合スコア11

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問