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:`
`:
     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:`
` (or :html:`
`) element with the :css:`.m-code-figure` class containing a :html:`
` block and whatever else
 you want to put in as the result. The :html:`
` element has to be the very
-first child of the :html:`
` for the markup to work correctly. Similar +first child of the :html:`
` 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:`
` 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.