<p>A typical proof consists of individual lines. Each line is numbered, so we can refer to them later. The main "meat" of the line is the "proof step" and there is an optional comment. The proof comment is designed for a comment, to allow an input to ask a question or to act as the second column in a two column proof.<p>
Consider the following proof by induction. \(P(n)\)
<divclass="proof">
<divclass="proof-block">
<divclass="proof-line">
<divclass="proof-num">1.</div>
<divclass="proof-step">Let \(P(n)\) be the statement</div>
<divclass="proof-comment">The first block of an induction proof must be a clear statement of the "induction hypothesis".</div>
</div>
<divclass="proof-line">
<divclass="proof-num">2.</div>
<divclass="proof-step">.... some maths ....</div>
<divclass="proof-comment">Notice, in this case, we have a purely algebraic induction hypothesis.</div>
</div>
</div>
<divclass="proof-block">
<divclass="proof-line">
<divclass="proof-num">3.</div>
<divclass="proof-step">Since</div>
<divclass="proof-comment">This block is known as the "base case".</div>
</div>
<divclass="proof-line">
<divclass="proof-num">4.</div>
<divclass="proof-step">Something profound and something else</div>
</div>
<divclass="proof-line">
<divclass="proof-num">5.</div>
<divclass="proof-step">it follows that P(1) is true.</div>
</div>
</div>
<divclass="proof-block">
<divclass="proof-line">
<divclass="proof-num">6.</div>
<divclass="proof-step">Assume that P(n) is true.</div>
<divclass="proof-comment">This block is known as the "induction step".</div>
</div>
<divclass="proof-line">
<divclass="proof-num">7.</div>
<divclass="proof-step">.... lots of complex working ....</div>
<divclass="proof-comment">We just consider the sum which occurs in P(n+1) and start to rearrange this.</div>
</div>
<divclass="proof-line">
<divclass="proof-num">8.</div>
<divclass="proof-step">More working</div>
<divclass="proof-comment">We are assuming P(n) is true, and here we use this fact.</div>
</div>
<divclass="proof-line">
<divclass="proof-num">9.</div>
<divclass="proof-step">More working.</div>
</div>
<divclass="proof-line">
<divclass="proof-num">10.</div>
<divclass="proof-step">Which gives us what we want</div>
<divclass="proof-comment">Notice we have rearranged the algebra to give us the right hand side of P(n+1).</div>
</div>
<divclass="proof-line">
<divclass="proof-num">11.</div>
<divclass="proof-step">Hence P(n+1) is true.</div>
<divclass="proof-comment">This block is the conclusion of the proof.</div>
</div>
</div>
<divclass="proof-block">
<divclass="proof-line">
<divclass="proof-num">12.</div>
<divclass="proof-step">Since P(1) and P(n) implies P(n+1) it follows that P(n) is true for all n by the principal of mathematical induction.</div>
<p>Alternatively, you can use columns, which are fixed at a width of 48%. The design assumes two columns and line numbers. Additionally, `proof-column-2` has a different visual style for emphasis.</p>
<p>Here is a proof of the great and wonderful theorem.</p>
<divclass="proof">
The proof has two cases.
<divclass="proof-block">
<divclass="proof-line">
<divclass="proof-num">1.</div>
<divclass="proof-column">The proof itself is in the first column.</div>
<divclass="proof-column-2">The second column can contain comments, here in <code>proof-column-2</code> style. </div>
<divclass="proof-column-2">With further comments.</div>
</div>
<divclass="proof-line">
<divclass="proof-column">This concludes the proof.</div>
</div>
<p>It is possible to use `proof-column-2` style in the first column, but this looks odd and is not recommended. The `proof-column-2` style is intended for only the second column. The `proof-column` style is intended to be used in both columns.</p>
<p>Consider the following proof by induction. \(P(n)\)</p>
<divclass="proof">
<divclass="proof-block">
<divclass="proof-line">
<divclass="proof-num">1.</div>
<divclass="proof-column">Let P(n) be the statement</div>
<divclass="proof-column-2">The first block of an induction proof must be a clear statement of the "induction hypothesis".</div>
</div>
<divclass="proof-line">
<divclass="proof-num">2.</div>
<divclass="proof-column">.... some maths ....</div>
<divclass="proof-column-2">Notice, in this case, we have a purely algebraic induction hypothesis.</div>
</div>
</div>
<divclass="proof-block">
<divclass="proof-line">
<divclass="proof-num">3.</div>
<divclass="proof-column">Since</div>
<divclass="proof-column-2">This block is known as the "base case".</div>
</div>
<divclass="proof-line">
<divclass="proof-num">4.</div>
<divclass="proof-column">Something profound and something else</div>
</div>
<divclass="proof-line">
<divclass="proof-num">5.</div>
<divclass="proof-column">it follows that P(1) is true.</div>
</div>
</div>
<divclass="proof-block">
<divclass="proof-line">
<divclass="proof-num">6.</div>
<divclass="proof-column">Assume that P(n) is true.</div>
<divclass="proof-column-2">This block is known as the "induction step".</div>
</div>
<divclass="proof-line">
<divclass="proof-num">7.</div>
<divclass="proof-column">.... lots of complex working ....</div>
<divclass="proof-column-2">We just consider the sum which occurs in P(n+1) and start to rearrange this.</div>
</div>
<divclass="proof-line">
<divclass="proof-num">8.</div>
<divclass="proof-column">More working</div>
<divclass="proof-column-2">We are assuming P(n) is true, and here we use this fact.</div>
</div>
<divclass="proof-line">
<divclass="proof-num">9.</div>
<divclass="proof-column">More working.</div>
</div>
<divclass="proof-line">
<divclass="proof-num">10.</div>
<divclass="proof-column">Which gives us what we want</div>
<divclass="proof-column-2">Notice we have rearranged the algebra to give us the right hand side of P(n+1).</div>
</div>
<divclass="proof-line">
<divclass="proof-num">11.</div>
<divclass="proof-column">Hence P(n+1) is true.</div>
<divclass="proof-column-2">This block is the conclusion of the proof.</div>
</div>
</div>
<divclass="proof-block">
<divclass="proof-line">
<divclass="proof-num">12.</div>
<divclass="proof-column">Since P(1) and P(n) implies P(n+1) it follows that P(n) is true for all n by the principal of mathematical induction.</div>
</div>
</div>
</div>
</div>
<h3><ol class="proof-steps"></h3>
<p>This class enables ordered lists to have connected numbered statements.</p>
<olclass="proof-steps">
<li>Let A be an n by n matrix and let R be the reduced row echelon form of A.</li>
<li>We will show first that det(A) is not zero if and only if det(R) is not zero.</li>
<li>Let <ol>
<li>E1,</li>
<li>E2,</li>
</ol> ... Er be the elementary matrices corresponding to the elementary row operations that reduce A to R.</li>
<li>Then Er ... E1 A = [[input:ans1]]]</li>
<li>Taking determinants of both sides, we obtain: det(Er) ... det(E_1) det(A) = det(R).</li>
<li>The determinants of all the elementary matrices are all [[input:ansdropdown]]]</li>
<li>We conclude that det(A) is not zero if and only if det(R) is not zero.</li>
<li>Now suppose that A is invertible.
<olclass="proof-steps">
<li>Then R = [[input:ans4]]</li>
<li>Thus, det(R) = [[input:ans3]] and hence det(A) is not zero.</li>
</ol></li>
<li>Conversely, if det(A) is not zero then det(R) is not zero, so R cannot have a zero row.</li>
<li>Thus R = I and A is invertible as required. </li>