Doc++

css/m-components.css

@@ -754,6 +754,7 @@ figure.m-figure.m-fullwidth, figure.m-figure.m-fullwidth > * {
   display: block;
 }
 figure.m-figure.m-fullwidth > *:first-child {
+  /* otherwise figure with clickable image is centered differently */
   display: inline;
 }
 figure.m-figure.m-fullwidth img, figure.m-figure.m-fullwidth svg {

doc/css/components.rst

@@ -884,7 +884,7 @@ instead of :html:`<pre>`:
     role.
 
 `Colored terminal output`_
-==========================
+--------------------------
 
 Besides code, it's also possible to "highlight" ANSI-colored terminal output.
 For that, m.css provides a custom Pygments lexer that's together with
@@ -919,14 +919,14 @@ might then look similarly to this:
     `colored console highlighting as well <{filename}/plugins/math-and-code.rst#colored-terminal-output>`_.
 
 `Code figure`_
-==============
+--------------
 
 It often happens that you want to present code with corresponding result
 together. The code figure looks similar to `image figures <#figures>`_ and
 consists of a :html:`<figure>` (or :html:`<div>`) element with the
 :css:`.m-code-figure` class containing a :html:`<pre>` block and whatever else
 you want to put in as the result. The :html:`<pre>` element has to be the very
-first child of the :html:`<figure>` for the markup to work correctly. Similar
+first child of the :html:`<figure>` for the markup to work correctly. Similarly
 to image figure, you can apply the :css:`.m-flat` CSS class to remove the
 border, the :html:`<figcaption>` element is styled as well.
 

doc/plugins/math-and-code.rst

@@ -391,3 +391,10 @@ terminal, it's best to have the listings in external files and use
 
     .. include:: math-and-code-console.ansi
         :code: ansi
+
+`Code figure`_
+--------------
+
+See the `m.components <{filename}/plugins/components.rst#code-math-and-graph-figure>`__
+plugin for details about code figures using the :rst:`.. code-figure::`
+directive.