From e0d58360abc3d90b80b07a542468453e7f2b5bb9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vladim=C3=ADr=20Vondru=C5=A1?= <mosra@centrum.cz>
Date: Sun, 14 Oct 2018 02:00:59 +0200
Subject: [PATCH] Doc++

---
 css/m-components.css          | 1 +
 doc/css/components.rst        | 6 +++---
 doc/plugins/math-and-code.rst | 7 +++++++
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/css/m-components.css b/css/m-components.css
index 993cdd18..0fe98dfd 100644
--- a/css/m-components.css
+++ b/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 {
diff --git a/doc/css/components.rst b/doc/css/components.rst
index 8fb8d6af..d2c9623f 100644
--- a/doc/css/components.rst
+++ b/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.
 
diff --git a/doc/plugins/math-and-code.rst b/doc/plugins/math-and-code.rst
index 58ac70a9..201b834f 100644
--- a/doc/plugins/math-and-code.rst
+++ b/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.