Section component

The section component is the top level of the hierarchy in the document. I've taken this from LaTeX document formatting, as I find a hierarchy quite easy to think in. Use a Section like this:


<Section name='name of the section'>
  --CONTENT GOES HERE--
</Section>
            

All the sections have automatic anchors added to them so that you can link to them. The name of the anchor is the name of the section, spaces and other punctuation removed, and converted to lowercase. You can refer to other sections using this method.

Subsection component

Exactly the same as a Section component, just with a different level of heading.


<Subsection name='name of the subsection'>
  --CONTENT GOES HERE--
</Subsection>
            

Example subsection

Here is how a subsection looks.

Subsubsection component

Exactly the same as a Section component, just with a different level of heading.


<Subsubsection name='name of the subsubection'>
  --CONTENT GOES HERE--
</Subsubsection>
            

Example subsubsection

Here is how a subsubsection looks. You shouldn't need anything below a subsubsection, that would suggest you're getting too granular.

Paragraph component

A paragraph is the lowest level of the document structure. Here is how you use one.


<Paragraph note='a note that I want to put next to my paragraph'>
  Here is the place where I put my text.
</Paragraph>
            

A useful feature is that you can put notes beside your paragraphs if you like. Notes are useful for information that isn't necessary, but might be interesting. Also it can be useful to have references in the notes.

Figure component

Figures are used mainly to hold images, or other plots. They take two parameters, fullwidth and a caption. If fullwidth is set to anything other than (the curly brackets are important), then the figure will be flush with the text. If it is set to true then the figure will take up the whole width of the page. Put your img tags in the figure to have the content show up.


<Figure 
  fullwidth={true}
  caption="Caption for the figure">
  --Content of the figure, for example an image--
</Figure>
            
Some dinosaurs having fun

The figures are numbered. Currently there is no way to link to a particular figure.

Code component

For inserting code snippets into the document. The highlighting comes from React syntax highlighter and uses any of the languages coming from Prism. Note that the code is passed in as a parameter and uses backticks within a pair of curly braces.


<Code 
  language='python'
  code={`
  def showtime(x):
    print(x)
  `}
  />
            

That code would make something like this:


def showtime(x):
    print(x)
            

BlockQuote component


<BlockQuote 
  source='https://en.wikiquote.org/wiki/Cat%27s_Cradle'
  person="Kurt Vonegut, Cat's Cradle"
  >
  Dr. Hoenikker used to say that any scientist who couldn't
  explain to an eight-year-old what he was doing was a charlatan.
</BlockQuote>
            

Produces:

Dr. Hoenikker used to say that any scientist who couldn't explain to an eight-year-old what he was doing was a charlatan.