{"id":5803,"date":"2020-09-04T15:11:55","date_gmt":"2020-09-04T19:11:55","guid":{"rendered":"http:\/\/developer.bu.edu\/bulb\/?post_type=bulb-learning-module&#038;p=5803"},"modified":"2021-03-31T15:12:18","modified_gmt":"2021-03-31T19:12:18","slug":"inserting-math-into-bulb-lesson-pages","status":"publish","type":"bulb-learning-module","link":"https:\/\/developer.bu.edu\/bulb\/lessons\/bulb-users-manual\/inserting-math-into-bulb-lesson-pages\/","title":{"rendered":"Inserting Math into BULB Lesson Pages"},"content":{"rendered":"\n<p>BU Learning Blocks sites support the use of <a rel=\"noreferrer noopener\" href=\"https:\/\/wordpress.org\/plugins\/mathjax-latex\/#description\" target=\"_blank\">MathJax-LaTeX<\/a> plugin in order to render mathematical formulae and equations. The MathJax-LaTeX plugin enables <a rel=\"noreferrer noopener\" href=\"http:\/\/www.mathjax.org\" target=\"_blank\">MathJax<\/a> functionality for WordPress.<\/p>\n\n\n\n<h2>What is MathJax? What is MathJax-LaTeX?<\/h2>\n\n\n\n<p>MathJax is a JavaScript display engine for mathematics that works in all browsers. MathJax enables rendering of embedded LaTeX or MathML in HTML pages. The MathJax JavaScript is inserted and loaded only on those pages which require it. This ensures that MathJax is not loaded for all pages, which will otherwise slow loading down.<\/p>\n\n\n\n<p>The MathJax-LaTeX plugin allows for the embedding of MathJax (using the LaTeX syntax) into BULB pages. <\/p>\n\n\n\n<ul><li>See here for more information on <a href=\"http:\/\/docs.mathjax.org\/en\/latest\/basic\/mathematics.html#tex-and-latex-input\">MathJax syntax using LaTeX<\/a>. <\/li><li>If you are unfamiliar with LaTeX syntax, start by reading the <a href=\"https:\/\/en.wikibooks.org\/wiki\/LaTeX\">LaTeX wiki Book<\/a>. <\/li><li>Here is an excellent quick reference guide to <a href=\"https:\/\/math.meta.stackexchange.com\/questions\/5020\/mathjax-basic-tutorial-and-quick-reference\">getting started with MathJax LaTeX syntax<\/a>.<\/li><\/ul>\n\n\n\n<h2>How do I embed MathJax-LaTeX equations on a BULB Lesson Page?&nbsp;<\/h2>\n\n\n\n<p>MathJax LaTeX equations are added to BULB Lesson Pages in normal paragraph blocks, shortcode blocks, or in BULB content block fields such as question&nbsp;header, question body, and in the answer fields of the Multiple Choice or Multiple Answer Blocks.&nbsp;<\/p>\n\n\n\n<p>In order to put a MathJax LaTeX equation into these fields, all you need is to surround your LaTeX equation between the LaTeX shortcode tags. To begin, type the word \u201clatex\u201d surrounded by square brackets, insert your LaTeX syntax, then close the shortcode with the \u201c\/latex\u201d\u2013again surrounded by square brackets.<\/p>\n\n\n\n<p>This is better illustrated through an example. If you wanted to render the following equation:&nbsp;<\/p>\n\n\n\n<p class=\"has-text-align-center\">\\( \\sum_{i=0}^n i^2 = \\frac{(n^2+n)(2n+1)}{6} \\)&nbsp;<\/p>\n\n\n\n<p>You would type this in the appropriate block in your page editor:&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;latex]\\sum_{i=0}^n i^2 = \\frac{(n^2+n)(2n+1)}{6}&#091;\/latex]\n<\/code><\/pre>\n\n\n\n<p>You can use these shortcodes multiple times per page\u2014in paragraph Blocks, <a href=\"https:\/\/wordpress.org\/support\/article\/shortcode-block\/\" target=\"_blank\" rel=\"noreferrer noopener\">shortcode blocks<\/a>, or within BULB block content areas.<\/p>\n\n\n\n<h2>Common Syntax<\/h2>\n\n\n\n<h4>Greek Letters<\/h4>\n\n\n\n<p>For using Greek letters use&nbsp;\\alpha, \\beta, &#8230;, \\omega, like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;latex]\\alpha&#091;\/latex]<\/code><\/pre>\n\n\n\n<p class=\"has-text-align-center\">\\(\\alpha\\)<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;latex]\\beta&#091;\/latex]<\/code><\/pre>\n\n\n\n<p class=\"has-text-align-center\">\\(\\beta\\)<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;latex]\\omega&#091;\/latex]<\/code><\/pre>\n\n\n\n<p class=\"has-text-align-center\">\\(\\omega\\)<\/p>\n\n\n\n<p>For uppercase, use \\Gamma, \\Delta, &#8230;, \\Omega:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;latex]\\Gamma&#091;\/latex]<\/code><\/pre>\n\n\n\n<p class=\"has-text-align-center\">\\(\\Gamma\\)<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;latex]\\Delta&#091;\/latex]<\/code><\/pre>\n\n\n\n<p class=\"has-text-align-center\">\\(\\Delta\\)<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;latex]\\Omega&#091;\/latex]<\/code><\/pre>\n\n\n\n<p class=\"has-text-align-center\">\\(\\Omega\\)<\/p>\n\n\n\n<h4>Superscripts and Subscripts<\/h4>\n\n\n\n<p>To add superscripts and subscripts use the &#8220;^&#8221; and &#8220;_&#8221;. For example: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;latex]x_i^2&#091;\/latex]<\/code><\/pre>\n\n\n\n<p class=\"has-text-align-center\">\\(x_i^2\\)<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;latex]\\log_2 x&#091;\/latex]<\/code><\/pre>\n\n\n\n<p class=\"has-text-align-center\">\\(\\log_2 x\\)<\/p>\n\n\n\n<h4>Groups<\/h4>\n\n\n\n<p>Superscripts, subscripts, and other operations apply only to the next \u201cgroup\u201d. A \u201cgroup\u201d is either a single symbol, or any formula surrounded by curly braces, { and }. For example, it you want to show: <\/p>\n\n\n\n<p class=\"has-text-align-center\">\\(10^{10}\\)<\/p>\n\n\n\n<p>You will need to be careful of grouping: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;latex]10^10&#091;\/latex]<\/code><\/pre>\n\n\n\n<p>Generates \\(10^10\\) NOT \\(10^{10}\\)<\/p>\n\n\n\n<p>The proper grouping syntax would be: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;latex]10^{10}&#091;\/latex]<\/code><\/pre>\n\n\n\n<p>Use curly braces to delimit the formula to which a superscript or subscript applies. Observe the difference between the following two examples: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;latex]x_i^2&#091;\/latex]<\/code><\/pre>\n\n\n\n<p class=\"has-text-align-center\">\\(x_i^2\\)<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;latex]x_{i^2}&#091;\/latex]<\/code><\/pre>\n\n\n\n<p class=\"has-text-align-center\">\\(x_{i^2}\\)<\/p>\n\n\n\n<h4>Parentheses<\/h4>\n\n\n\n<p>Ordinary symbols () and [] make parentheses and brackets. Use \\{ and \\} to render curly brackets. These symbols <em>do not scale<\/em> to the formulae that they enclose. To do so, use &#8220;\\left&#8221; and &#8220;\\right&#8221; to make the sizes adjust to the size of the formulae they enclose. For example: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;latex](\\frac{\\sqrt x}{y^3})&#091;\/latex]<\/code><\/pre>\n\n\n\n<p class=\"has-text-align-center\">\\((\\frac{\\sqrt x}{y^3})\\) <\/p>\n\n\n\n<p>Instead, view the same equation using the &#8220;\\left&#8221; and &#8220;\\right&#8221; delimiters:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;latex]\\left(\\frac{\\sqrt x}{y^3}\\right)&#091;\/latex]<\/code><\/pre>\n\n\n\n<p class=\"has-text-align-center\">\\(\\left(\\frac{\\sqrt x}{y^3}\\right)\\)<\/p>\n\n\n\n<p>&#8220;\\left&#8221; and &#8220;\\right&#8221; apply to all the following sorts of parentheses (again, make sure to always enclose your formulae in the &#8220;latex&#8221; shortcode tags): <\/p>\n\n\n\n<ul><li>&#8220;(&#8221; and &#8220;)&#8221; = <code>(x)<\/code> = \\((x)\\)<\/li><li>&#8220;[&#8221; and &#8220;]&#8221; = <code>[x]<\/code>  = \\([x]\\)<\/li><li>&#8220;\\{&#8221; and &#8220;\\}&#8221; = <code>\\{x\\}<\/code> = \\(\\{x\\}\\)<\/li><li>&#8220;\\|&#8221; = <code>\\|x\\|<\/code> = \\(\\|x\\|\\)<\/li><li>&#8220;\\vert&#8221; = <code>\\vert x \\vert<\/code> = \\(\\vert x \\vert\\)<\/li><li>&#8220;\\Vert&#8221; = <code>\\Vert x \\Vert<\/code> = \\(\\Vert x \\Vert\\)<\/li><li>&#8220;\\langle&#8221; and &#8220;\\rangle&#8221; = <code>\\langle x \\rangle<\/code> = \\(\\langle x \\rangle \\)<\/li><li>&#8220;\\lceil&#8221; and &#8220;\\rceil&#8221; = <code>\\lceil x \\rceil<\/code> = \\(\\lceil x \\rceil \\)<\/li><li>&#8220;\\lfloor&#8221; and &#8220;\\rfloor&#8221; = <code>\\lfloor x \\rfloor<\/code> = \\(\\lfloor x \\rfloor \\)<\/li><\/ul>\n\n\n\n<p>You can make manual adjustments to the sizes by using the following syntax: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;latex]\\Biggl(\\biggl(\\Bigl(\\bigl((x)\\bigr)\\Bigr)\\biggr)\\Biggr)&#091;\/latex]<\/code><\/pre>\n\n\n\n<p class=\"has-text-align-center\">\\(\\Biggl(\\biggl(\\Bigl(\\bigl((x)\\bigr)\\Bigr)\\biggr)\\Biggr)\\)<\/p>\n\n\n\n<h4>Sums and Integrals<\/h4>\n\n\n\n<p>&#8220;\\sum&#8221; and &#8220;\\int&#8221; create sums and integrals. The subscript is the lower limit and the superscript is the upper limit. For example: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;latex]\\sum_1^n&#091;\/latex]<\/code><\/pre>\n\n\n\n<p class=\"has-text-align-center\">\\(\\sum_1^n\\)<\/p>\n\n\n\n<p>Remember, if you want to include more complex subscripts and superscripts, use curly brackets { and }. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;latex]\\sum_{i=0}^\\infty i^2&#091;\/latex]<\/code><\/pre>\n\n\n\n<p class=\"has-text-align-center\">\\(\\sum_{i=0}^\\infty i^2\\)<\/p>\n\n\n\n<p>Similar syntax applies to:<\/p>\n\n\n\n<ul><li>\\(\\prod\\) =  <code>\\prod<\/code><\/li><li>\\(\\int\\) =  <code>\\int<\/code><\/li><li>\\(\\bigcup\\) =  <code>\\bigcup<\/code><\/li><li>\\(\\bigcap\\) = <code>\\bigcap<\/code><\/li><li>\\(\\iint\\) =  <code>\\iint<\/code><\/li><li>\\(\\iiint\\) = <code>\\iiint<\/code><\/li><\/ul>\n\n\n\n<h4>Fractions<\/h4>\n\n\n\n<p>There are three main ways to generate fractions. &#8220;\\frac&#8221; applies to the next two groups. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;latex]\\frac ab&#091;\/latex]<\/code><\/pre>\n\n\n\n<p class=\"has-text-align-center\">\\(\\frac ab\\)<\/p>\n\n\n\n<p>Make sure you use curly brackets, &#8220;{&#8221; and &#8220;}&#8221;, to create more complex fractions. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;latex]\\frac {a+1}{b+1}&#091;\/latex]<\/code><\/pre>\n\n\n\n<p class=\"has-text-align-center\">\\(\\frac {a+1}{b+1}\\)<\/p>\n\n\n\n<p>If your numerator or denominator is more complicated, you may want to use &#8220;\\over&#8221; to split a single group. For example: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;latex]{a+1 \\over b+1}&#091;\/latex]<\/code><\/pre>\n\n\n\n<p class=\"has-text-align-center\">\\({a+1 \\over b+1}\\)<\/p>\n\n\n\n<p>This is useful for creating more complex fractions such as: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;latex]\\frac {a+1 \\over b+1}{c+1 \\over d+1}&#091;\/latex]<\/code><\/pre>\n\n\n\n<p class=\"has-text-align-center\">\\(\\frac {a+1 \\over b+1}{c+1 \\over d+1}\\)<\/p>\n\n\n\n<h4>Radical Signs<\/h4>\n\n\n\n<p>Use &#8220;\\sqrt&#8221; to create formulae using radical signs. For example: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;latex]\\sqrt{x^3}&#091;\/latex]<\/code><\/pre>\n\n\n\n<p class=\"has-text-align-center\">\\(\\sqrt{x^3}\\)<\/p>\n\n\n\n<p>Use square brackets to designate the level of your radical (square root, cube root, etc&#8230;). <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;latex]\\sqrt&#091;3]{x^3}&#091;\/latex]<\/code><\/pre>\n\n\n\n<p class=\"has-text-align-center\">\\(\\sqrt[3]{x^3}\\)<\/p>\n\n\n\n<p>You can also put fractions within radicals. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;latex]\\sqrt&#091;4]{\\frac xy}&#091;\/latex]<\/code><\/pre>\n\n\n\n<p class=\"has-text-align-center\">\\(\\sqrt[4]{\\frac xy}\\)<\/p>\n\n\n\n<p>For more detailed expressions, please consider referencing <a href=\"https:\/\/math.meta.stackexchange.com\/questions\/5020\/mathjax-basic-tutorial-and-quick-reference\">this guide<\/a>. <\/p>\n\n\n\n<p><strong>Reminder: <\/strong>While using BULB, please be sure to always enclose your formulae in the &#8220;<code>[ latex ]<\/code>&#8221; opening tag and &#8220;<code>[ \/latex ]<\/code>&#8221; closing tag (with the spaces removed) or the latex syntax will not render on the page. <\/p>\n<div class=\"bulb-pagination\" aria-label=\"pagination\">\n\t<div class=\"bulb-pagination-label\">Page 14 of 16<\/div>\n\n\t<a href='https:\/\/developer.bu.edu\/bulb\/lessons\/bulb-users-manual\/'>&laquo; First Page<\/a><a href='https:\/\/developer.bu.edu\/bulb\/lessons\/bulb-users-manual\/true-false-block\/'>&lsaquo; Previous Page<\/a><a href=https:\/\/developer.bu.edu\/bulb\/lessons\/bulb-users-manual\/true-false-block\/ class=\"inactive\">13<\/a><span class=\"current\">14<\/span><a href=https:\/\/developer.bu.edu\/bulb\/lessons\/bulb-users-manual\/export-import\/ class=\"inactive\">15<\/a><a href=https:\/\/developer.bu.edu\/bulb\/lessons\/bulb-users-manual\/contact-us\/ class=\"inactive\">16<\/a><a href=\"https:\/\/developer.bu.edu\/bulb\/lessons\/bulb-users-manual\/export-import\/\">Next Page &rsaquo;<\/a><a href=\"https:\/\/developer.bu.edu\/bulb\/lessons\/bulb-users-manual\/contact-us\/\">Last Page &raquo;<\/a><\/div>\n","protected":false},"author":17839,"parent":5326,"menu_order":13,"template":"","bulb-courses":[3],"_links":{"self":[{"href":"https:\/\/developer.bu.edu\/bulb\/wp-json\/wp\/v2\/bulb-learning-module\/5803"}],"collection":[{"href":"https:\/\/developer.bu.edu\/bulb\/wp-json\/wp\/v2\/bulb-learning-module"}],"about":[{"href":"https:\/\/developer.bu.edu\/bulb\/wp-json\/wp\/v2\/types\/bulb-learning-module"}],"author":[{"embeddable":true,"href":"https:\/\/developer.bu.edu\/bulb\/wp-json\/wp\/v2\/users\/17839"}],"version-history":[{"count":35,"href":"https:\/\/developer.bu.edu\/bulb\/wp-json\/wp\/v2\/bulb-learning-module\/5803\/revisions"}],"predecessor-version":[{"id":5863,"href":"https:\/\/developer.bu.edu\/bulb\/wp-json\/wp\/v2\/bulb-learning-module\/5803\/revisions\/5863"}],"up":[{"embeddable":true,"href":"https:\/\/developer.bu.edu\/bulb\/wp-json\/wp\/v2\/bulb-learning-module\/5326"}],"wp:attachment":[{"href":"https:\/\/developer.bu.edu\/bulb\/wp-json\/wp\/v2\/media?parent=5803"}],"wp:term":[{"taxonomy":"bulb-courses","embeddable":true,"href":"https:\/\/developer.bu.edu\/bulb\/wp-json\/wp\/v2\/bulb-courses?post=5803"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}