JSFiddle - React, Tailwind, and code Playground

by SASSACB

HTML

<!DOCTYPE html>
<html>
<head>
	<title>math.js | printing HTML</title>

	<script src="http://cdnjs.cloudflare.com/ajax/libs/mathjs/3.20.2/math.min.js"></script>

	<style>
		body {
			font-size: 11pt;
			font-family: verdana, arial, sans-serif;
		}

		h1 {
			font-size: 1rem;
		}

		fieldset {
			display: inline;
			margin: 0 50px 10px 0;
			padding: 0;
			border: none;
		}

		input[type=text] {
			font-size: 11pt;
			font-family: verdana, arial, sans-serif;
			padding: 5px;
			width: calc(100% - 14px);
		}

		label {
			margin: 0 5px 0 0;
		}

		table {
			width: 100%;
			border-collapse: collapse;
		}

		table td,
		table th {
			padding: 5px;
			border: 1px solid LightGrey;
		}

		table th {
			background-color: LightGrey;
		}

		/* style the HTML output */
		.math-function {
			color: Purple;
			font-weight: bold;
		}

		.math-number {
			color: Blue;
		}

		.math-boolean {
			color: Green;
		}

		.math-string {
			color: Grey;
		}

		.math-string::before,
		.math-string::after {
			content: "\"";
		}

		.math-property {
			font-style: italic;
		}

		.math-explicit-binary-operator::before,
		.math-explicit-binary-operator::after {
			content: " ";
		}

		.math-separator::after,
		.math-assignment-operator::after {
			content: " ";
		}
	</style>
</head>
<body>
<h1>Expression evaluation and HTML code generation with math.js</h1>
<form>
	<fieldset>
		Parenthesis option:
		<label><input type="radio" name="parenthesis" value="keep" checked>keep</label>
		<label><input type="radio" name="parenthesis" value="auto">auto</label>
		<label><input type="radio" name="parenthesis" value="all">all</label>
	</fieldset>
	<fieldset>
		Implicit multiplication:
		<label><input type="radio" name="implicit" value="hide" checked>hide</label>
		<label><input type="radio" name="implicit" value="show">show</label>
	</fieldset>
</form>
<table>
	<tr>
		<th>Expression</th>
		<td><input type="text" id="expr"/></td>
	</tr>
	<tr>
		<th>Result</th>
		<td><div...

JavaScript

// basic usage

// load math.js (using node.js)
var math = require('mathjs');

// functions and constants
console.log('functions and constants');
print(math.round(math.e, 3));           // 2.718
print(math.atan2(3, -3) / math.pi);     // 0.75
print(math.log(10000, 10));             // 4
print(math.sqrt(-4));                   // 2i
print(math.pow([[-1, 2], [3, 1]], 2));  // [[7, 0], [0, 7]]
print(math.derivative('x^2 + x', 'x')); // 2 * x + 1
console.log();

// expressions
console.log('expressions');
print(math.eval('1.2 * (2 + 4.5)'));    // 7.8
print(math.eval('12.7 cm to inch'));    // 5 inch
print(math.eval('sin(45 deg) ^ 2'));    // 0.5
print(math.eval('9 / 3 + 2i'));         // 3 + 2i
print(math.eval('det([-1, 2; 3, 1])')); // -7
console.log();

// chained operations
console.log('chained operations');
var a = math.chain(3)
    .add(4)
    .multiply(2)
    .done();
print(a);      // 14
console.log();

// mixed use of different data types in functions
console.log('mixed use of data types');
print(math.add(4, [5, 6]));                   // number + Array, [9, 10]
print(math.multiply(math.unit('5 mm'), 3));   // Unit * number,  15 mm
print(math.subtract([2, 3, 4], 5));           // Array - number, [-3, -2, -1]
print(math.add(math.matrix([2, 3]), [4, 5])); // Matrix + Array, [6, 8]
console.log();


/**
 * Helper function to output a value in the console. Value will be formatted.
 * @param {*} value
 */
function print (value) {
  var precision = 14;
  console.log(math.format(value, precision));
}