Cara menampilkan rumus matematika di blog AMP

Time needed: 10 minutes.

Berikut adalah langkah agar dapat menampilkan rumus matematika di blogspot dengan jenis blog AMP. Rumus matematika untuk blog AMP ini menggunakan MathML Formula.

  1. Pasang komponen amp-mathml

    Pasang komponen amp-mathml pada pengeditan tema blogger. Copy dan paste kode amp-mathml berikut diatas kode </head>.

    <b:if cond=’data:blog.pageType ==”item”‘>
    <script async=”async” custom-element=”amp-mathml” src=”https://cdn.ampproject.org/v0/amp-mathml-0.1.js”></script>
    </b:if>

    script yang berwarna hijau ada kode komponen amp-mathml, adapun kode <b:if cond=’data:blog.pageType ==”item”‘> adalah untuk menampilkan kode hanya pada postingan blog saja.

  2. Sembunyikan \cos(θ+φ)

    Langkah selanjutnya adalah sembunyikan formula \cos(θ+φ). Copy dan paste kode rumus matematika diatas kode </body> dan copy dan paster kode css dibagian css amp blog kamu

    <b:if cond=’data:blog.pageType == “item”‘>
    <amp-mathml class=”mathmlnodisplay” layout=”container” inline=”” data-formula=”\[ \cos(θ+φ) \]”></amp-mathml>
    </b:if>

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

    Dalam hal ini saya tidak mengerti kenapa harus disembunyikan formula tersebut. Mengingat di blog referensi AMP tidak ada suruhan untuk melakukan itu. Tetapi beberapa referensi tutorial blog lain banyak menerapkan hal ini.

    Simpan perubahan pada tema blog kamu jika langkah 1 dan 2 ini selesai.

  3. Implementasi rumus matematika amp-mathml

    Selanjutnya adalah menampilkan rumus matematika dipostingan blog. Format rumus matematika di blog amp adalah sebagai berikut:

    <amp-mathml
    layout=”container”
    data-formula=
    “isi dengan rumus matematika kamu”
    ></amp-mathml>


    Adapun cara menulis rumus matematikanya dapat menggunakan tools https://codecogs.com/latex/eqneditor.php

  4. Atribut inline untuk merender rumus berada dalam kalimat

    Jika ingin menampilkan rumus matematikanya berada dalam kalimatnya cukup tambahkan kode inline. Contoh seperti berikut ini:

    <amp-mathml
    layout=”container”
    inline
    data-formula=”isi dengan rumus matematika kamu”
    ></amp-mathml>