Penulisan Rumus Matematika Di Blog Amp Dengan Mathml

Ada beberapa sobat Kompi Ajaib yang mempunyai niche pendidikan dan kerepotan menciptakan postingan yang menampilkan rumus matematika atau rumus-rumus ilmiah di AMP.

Karena biasanya mereka memakai script menyerupai LaTeX atau lainnya, sehingga ini akan mengakibatkan error AMP.

Untuk itu sekarang tim AMP sudah menyediakan cara untuk menuliskan rumus matematika atau rumus-rumus ilmiah di dalam postingan AMP dengan menyediakan js mathml.

Ekstensi amp-mathml ini memakai iframe untuk merender rumus-rumus MathML untuk ditampilkan di dalam AML HTML, menyerupai pada demo JSFiddle berikut ini:

Agar dapat membuatnya menyerupai itu, silahkan pasang js amp-mathml berikut di atas aba-aba </head>

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <script async="async" custom-element="amp-mathml" src="https://cdn.ampproject.org/v0/amp-mathml-0.1.js"></script>
 </b:if>

Kemudian simpan aba-aba berikut di atas aba-aba </body>

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <amp-mathml class="mathmlnodisplay" layout="container" inline data-formula="\[ \cos(θ+φ) \]"></amp-mathml>
 </b:if>

Lalu silahkan simpan aba-aba CSS berikut di style amp-custom.

 .mathmlnodisplay{display:none;visibility:hidden;}

Kemudian untuk menampilkan rumus matematika-nya, silahkan tuliskan aba-aba berikut di postingan mode HTML.

 <amp-mathml
     layout="container"
     data-formula="\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]">
   </amp-mathml>

Silahkan ganti aba-aba yang aku tandai dengan formula mathml yang ingin Anda tampilkan.

amp-mathml juga dapat disimpan di dalam baris kalimat dengan menambahkan aba-aba inline pada tag amp-mathml menyerupai berikut ini:

 <amp-mathml layout="container" inline data-formula="\[ \cos(θ+φ) \]"></amp-mathml>

Silahkan ganti aba-aba yang aku tandai pada data-formula dengan formula mathml yang ingin Anda tampilkan.

Sehingga penampakannya menjadi menyerupai ini:

 This is an example of a formula placed inline in the middle of a block of text. <amp-mathml layout="container" inline data-formula="\[ \cos(θ+φ) \]"></amp-mathml> This shows how the formula will fit inside a block of text and can be styled with CSS.

Dan secara default amp-mathml akan menampilkan rumus di tengah (center), namun bila Anda ingin menampilkannya di sebelah kiri maka Anda juga dapat menambahkan aba-aba inline namun jangan lupa menambah aba-aba <br /> di bawahnya biar text bawahnya tidak menyerobot di sampingnya sehingga tampilannya menjadi menyerupai ini.

 <amp-mathml
     layout="container"
     inline
     data-formula="\[f(a) = \frac{1}{2\pi i} \oint\frac{f(z)}{z-a}dz\]">
   </amp-mathml>
   <br />
   This is an example of a formula placed  inline in the middle of a block of text.

Sekian, semoga bermanfaat.

Sumber: https://www.ampproject.org/docs/reference/components/amp-mathml


Sumber https://www.kompiajaib.com/

Share this post