5

This pgfplot gallery is excellent. I try to use org mode to generate similar html but the image and code block not align.

#+HTML_HEAD: <style type="text/css">
#+HTML_HEAD: .example {background-color:#eff0f1;}
#+HTML_HEAD: .org-src-container {width:65%; float:right; vertical-align:top; background-color:#ccccff;}
#+HTML_HEAD: img {width:33%; background-color:#f5f5cc;}
#+HTML_HEAD: </style>
#+OPTIONS: html-postamble:nil

#+HEADER: :fit yes :imagemagick yes :iminoptions -density 300
#+HEADER: :packages '("\\usepackage{tikz} \\usepackage{pgfplots} \\pgfplotsset{compat=newest}")
#+BEGIN_SRC latex :file example_0.png :results raw file :exports both
\begin{tikzpicture}
\begin{axis}[
    xmin=-3,   xmax=3,
    ymin=-3,   ymax=3,
    extra x ticks={-1,1},
    extra y ticks={-2,2},
    extra tick style={grid=major},
]
    \draw[red] \pgfextra{
      \pgfpathellipse{\pgfplotspointaxisxy{0}{0}}
        {\pgfplotspointaxisdirectionxy{1}{0}}
        {\pgfplotspointaxisdirectionxy{0}{2}}
      % see also the documentation of 
      % 'axis direction cs' which
      % allows a simpler way to draw this ellipse
    };
    \draw[blue] \pgfextra{
      \pgfpathellipse{\pgfplotspointaxisxy{0}{0}}
        {\pgfplotspointaxisdirectionxy{1}{1}}
        {\pgfplotspointaxisdirectionxy{0}{2}}
    };
    \addplot [only marks,mark=*] coordinates { (0,0) };
\end{axis}
\end{tikzpicture}
#+END_SRC

#+RESULTS:
[[file:example.png]]

#+HEADER: :fit yes :imagemagick yes :iminoptions -density 300
#+HEADER: :packages '("\\usepackage{tikz} \\usepackage{pgfplots} \\pgfplotsset{compat=newest}")
#+BEGIN_SRC latex :file example_1.png :results raw file :exports both
\begin{tikzpicture}
    \begin{axis}[
        xlabel=Cost,
        ylabel=Error]
    \addplot[color=red,mark=x] coordinates {
        (2,-2.8559703)
        (3,-3.5301677)
        (4,-4.3050655)
        (5,-5.1413136)
        (6,-6.0322865)
        (7,-6.9675052)
        (8,-7.9377747)
    };
    \end{axis}
\end{tikzpicture}
#+END_SRC

#+RESULTS:
[[file:example_1.png]]

Current output:

enter image description here

The left image should top align the right code block!

3

Use absolute position,adjust some margin,padding property (image at right):

#+HTML_HEAD: <style type="text/css">
#+HTML_HEAD: pre {box-shadow:none; margin: 1pt; background-color:#ccccff;}
#+HTML_HEAD: .example {background-color:#eff0f1;}
#+HTML_HEAD: #content {position: absolute;}
#+HTML_HEAD: .org-src-container {width:65%; display:inline-block; vertical-align:top; margin:1pt;}
#+HTML_HEAD: .figure {width:32%; display: inline-block; padding: 2pt;}
#+HTML_HEAD: .figure p {margin: 0;}
#+HTML_HEAD: img {width:100%; background-color:#f5f5cc;}
#+HTML_HEAD: </style>
#+OPTIONS: html-postamble:nil

#+HEADER: :fit yes :imagemagick yes :iminoptions -density 300
#+HEADER: :packages '("\\usepackage{tikz} \\usepackage{pgfplots} \\pgfplotsset{compat=newest}")
#+BEGIN_SRC latex :file example_0.png :results raw file :exports both
\begin{tikzpicture}
\begin{axis}[
    xmin=-3,   xmax=3,
    ymin=-3,   ymax=3,
    extra x ticks={-1,1},
    extra y ticks={-2,2},
    extra tick style={grid=major},
]
    \draw[red] \pgfextra{
      \pgfpathellipse{\pgfplotspointaxisxy{0}{0}}
        {\pgfplotspointaxisdirectionxy{1}{0}}
        {\pgfplotspointaxisdirectionxy{0}{2}}
      % see also the documentation of 
      % 'axis direction cs' which
      % allows a simpler way to draw this ellipse
    };
    \draw[blue] \pgfextra{
      \pgfpathellipse{\pgfplotspointaxisxy{0}{0}}
        {\pgfplotspointaxisdirectionxy{1}{1}}
        {\pgfplotspointaxisdirectionxy{0}{2}}
    };
    \addplot [only marks,mark=*] coordinates { (0,0) };
\end{axis}
\end{tikzpicture}
#+END_SRC

#+RESULTS:
[[file:example.png]]

#+HEADER: :fit yes :imagemagick yes :iminoptions -density 300
#+HEADER: :packages '("\\usepackage{tikz} \\usepackage{pgfplots} \\pgfplotsset{compat=newest}")
#+BEGIN_SRC latex :file example_1.png :results raw file :exports both
\begin{tikzpicture}
    \begin{axis}[
        xlabel=Cost,
        ylabel=Error]
    \addplot[color=red,mark=x] coordinates {
        (2,-2.8559703)
        (3,-3.5301677)
        (4,-4.3050655)
        (5,-5.1413136)
        (6,-6.0322865)
        (7,-6.9675052)
        (8,-7.9377747)
    };
    \end{axis}
\end{tikzpicture}
#+END_SRC

#+RESULTS:
[[file:example_1.png]]

New result: enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.