@ampproject/amp-mathml
Advanced tools
Renders a MathML formula in an iframe.
You must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See Layout and style.
The examples below demonstrate use of the <bento-mathml> web component.
[example preview="top-frame" playground="false"]
Install via npm:
npm install @ampproject/bento-mathml
import '@ampproject/bento-mathml';
[/example]
<script>The example below contains an bento-mathml with three sections. The
expanded attribute on the third section expands it on page load.
[example preview="top-frame" playground="false"]
<head>
<script src="https://cdn.ampproject.org/custom-elements-polyfill.js"></script>
<script async src="https://cdn.ampproject.org/v0/bento-mathml-1.0.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/bento-mathml-1.0.css">
</head>
<body>
<h2>The Quadratic Formula</h2>
<bento-mathml style="height: 40px" data-formula="\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]"></bento-mathml>
<h2>Cauchy's Integral Formula</h2>
<bento-mathml style="height: 41px" data-formula="\[f(a) = \frac{1}{2\pi i} \oint\frac{f(z)}{z-a}dz\]"></bento-mathml>
<h2>Double angle formula for Cosines</h2>
<bento-mathml style="height: 19px" data-formula="\[cos(θ+φ)=\cos(θ)\cos(φ)−\sin(θ)\sin(φ)\]"></bento-mathml>
<h2>Inline formula</h2>
<p>
This is an example of a formula of <bento-mathml style="height: 11px; width: 8px" inline data-formula="`x`"></bento-mathml>, <bento-mathml style="height: 40px; width: 147px" inline data-formula="\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]"></bento-mathml> placed inline in the middle of a block of text. <bento-mathml style="height: 19px; width: 72px" inline data-formula="\( \cos(θ+φ) \)"
></bento-mathml> This shows how the formula will fit inside a block of text and can be styled with CSS.
</p>
</body>
[/example]
Each Bento component has a small CSS library you must include to guarantee proper loading without content shifts. Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.
<link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/bento-mathml-1.0.css">
Alternatively, you may also make the light-weight pre-upgrade styles available inline:
<style data-bento-boilerplate>
amp-mathml {
display: block;
overflow: hidden;
position: relative;
}
</style>
data-formula (required)Specifies the formula to render.
inline (optional)If specified, the component renders inline (inline-block in CSS).
title (optional)Define a title attribute for the component to propagate to the underlying <iframe> element. The default value is "MathML formula".
You may use the bento-mathml element selector to style the accordion freely.
The examples below demonstrates use of the <BentoMathml> as a functional component usable with the Preact or React libraries.
[example preview="top-frame" playground="false"]
Install via npm:
npm install @ampproject/bento-mathml
import React from 'react';
import { BentoMathml } from '@ampproject/bento-mathml/react';
import '@ampproject/bento-mathml/styles.css';
function App() {
return (
<h2>The Quadratic Formula</h2>
<BentoMathml style={{height: 40}} formula="\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]"></BentoMathml>
<h2>Cauchy's Integral Formula</h2>
<BentoMathml style={{height: 41}} formula="\[f(a) = \frac{1}{2\pi i} \oint\frac{f(z)}{z-a}dz\]"></BentoMathml>
<h2>Double angle formula for Cosines</h2>
<BentoMathml style={{height: 19}} formula="\[cos(θ+φ)=\cos(θ)\cos(φ)−\sin(θ)\sin(φ)\]"></BentoMathml>
<h2>Inline formula</h2>
<p>
This is an example of a formula of <BentoMathml style={{height: 11, width: 8}} inline formula="`x`"></BentoMathml>, <BentoMathml style={{height: 40, width: 147}} inline formula="\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]"></BentoMathml> placed inline in the middle of a block of text. <BentoMathml style={{height: 19, width: 72}} inline formula="\( \cos(θ+φ) \)"
></BentoMathml> This shows how the formula will fit inside a block of text and can be styled with CSS.
</p>
);
}
[/example]
Container type
The BentoMathml component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with height, width, aspect-ratio, or other such properties). These can be applied inline:
<BentoMathml style={{width: '300px', height: '100px'}}>
...
</BentoMathml>
Or via className:
<BentoMathml className='custom-styles'>
...
</BentoMathml>
.custom-styles {
background-color: red;
height: 40px;
width: 147px;
}
formula (required)Specifies the formula to render.
inline (optional)If specified, the component renders inline (inline-block in CSS).
title (optional)Define a title attribute for the component to propagate to the underlying <iframe> element. The default value is "MathML formula".
FAQs
AMP HTML amp-mathml Component
We found that @ampproject/amp-mathml demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 16 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Maintainers back GitHub’s npm security overhaul but raise concerns about CI/CD workflows, enterprise support, and token management.
Product
Socket Firewall is a free tool that blocks malicious packages at install time, giving developers proactive protection against rising supply chain attacks.
Research
Socket uncovers malicious Rust crates impersonating fast_log to steal Solana and Ethereum wallet keys from source code.