Installation - restructuredBootstrap & restructuredWeb

Install the extension¶

pip install restructuredWeb

Update sphinx-project/conf.py¶

extensions = [
    # Import all components
    'restructuredWeb',
]

View sphinx setup

Place adsense ads within your rest documents using the adsense directive
https://www.google.com/adsense

conf.py¶

# Adsense config
adsense_client_id = '<ca-pub-XXXXXXXXXXX>'

# Named Slots
adsense_slots = {
    'named-slot-1': '<ADSENSE_ID>',
    'named-slot-2': '<ADSENSE_ID>',
}

# Add a default slot, used if no argument is passed
adsense_default_slot = 'named-slot-1'

layout.html¶

<!-- Add this into your layout.html -->
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Option List¶

.. adsense:: <NamedAdSlot>

This will default to config option “adsense_default_slot”¶

.. adsense::

<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-XXXXXXXXXXX" data-ad-slot="123456789" data-ad-format="auto"></ins>

Contain it within a .wrapper¶

.. adsense:: post-inline
  :class: wrapper

<div class="wrapper">
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-XXXXXXXXXXX" data-ad-slot="123456789" data-ad-format="auto"></ins>
</div>

https://codepen.io/embeds

You can set the default theme via your conf.py

conf.py¶

# Set the theme via a configuration value
codepen_theme = 'light' # or 'dark'

layout.html¶

# Add the following snippet after your script files
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

Option List¶

.. codepen:: <Embed URL>
  :height: <Integer>
  :preview: <Flag> {# Load Preview #}
  :theme: <Theme> {# Light or dark - can be set via conf.py #}
  :tabs: <CommaList> [html,css,js,result]

Embed with a custom height, preview and theme¶

.. codepen:: https://codepen.io/j_holtslander/pen/XmpMEp
  :preview:
  :height: 600px
  :theme: dark
  :tabs: js,result

https://codepen.io/j_holtslander/pen/XmpMEp

Helpers to output formatted code and configuration formats
https://github.com/fabpot/sphinx-php
http://pygments.org/docs/lexers/

You can set the default theme via your conf.py

Option List¶

.. code-block:: <Language>
    :caption: <CaptionText>
    :emphasize-lines: <Lines> {# 2,3,4 or 2-6 #}
    :linenos: <Flag>
    :dedent: <Integer> {# No of chars to dedent #}

.. literalinclude:: <FilePath>
    :language: <Language>
    :emphasize-lines: <Lines> {# 2,3,4 or 2-6 #}
    :linenos: <Flag>

A simple code block¶

.. code-block:: html

    <div class="row">
      <div class="col-xs-12">
        <h1>Some HTML Content</h1>
      </div>
    </div>

<div class="row">
  <div class="col-xs-12">
    <h1>Some HTML Content</h1>
  </div>
</div>

A fancy code block with a caption and line numbers¶

.. code-block:: python
    :caption: :fa:`file fw` touch ~/Desktop/project/some-file.py
    :emphasize-lines: 2,3
    :linenos:
    :dedent: 4

        def a_function():
            some_variable = "Hello world!"
            print 'Hello world!'

.. Note the 'dedent' option
.. Icons require the font-awesome role

touch ~/Desktop/project/some-file.py¶

def a_function():
    some_variable = "Hello world!"
    print 'Hello world!'

Use a .. configuration-block:: to show configuration formats¶

.. configuration-block::

    .. code-block:: json
        :emphasize-lines: 4,5
        :linenos:
        :dedent: 4

            {
              "text": "some text for line 1\nsome text for line 2\n",
              "array": [
                "item#1",
                "item#2"
              ],
              "object": {"name": "John", "age": 24, "is_human": true, "height": 1.64}
            }

    .. code-block:: yaml
        :emphasize-lines: 6-7
        :linenos:
        :dedent: 4

            ---
            text: |
              some text for line 1
              some text for line 2
            array:
            - item#1
            - item#2
            object:
              name: John
              age: 24
              is_human: true
              height: 1.64

JSON

{
  "text": "some text for line 1\nsome text for line 2\n",
  "array": [
    "item#1",
    "item#2"
  ],
  "object": {"name": "John", "age": 24, "is_human": true, "height": 1.64}
}

YAML

---
text: |
  some text for line 1
  some text for line 2
array:
- item#1
- item#2
object:
  name: John
  age: 24
  is_human: true
  height: 1.64

Use a literalinclude to include from external source files¶

.. configuration-block::

    .. literalinclude:: /web/code-examples/examples/swift-example.swift
        :language: swift
        :emphasize-lines: 13
        :linenos:

    .. literalinclude:: /web/code-examples/examples/objectivec-example.m
        :language: objc
        :emphasize-lines: 15
        :linenos:

Swift

import @Header

class Node {
    var _viewController: _viewController!

    override init() {
        super.init()
    }

    convenience init(model: NodeModel) throws {
        self.init()

        self.clipsToBounds = true
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        print("View controller log")
    }
}

Objective C

#import "HeaderFile1.h"

@interface Node ()
{
    UIViewController *_viewController;
}
@end

@implementation Node
- (instancetype)init
{
    if (!(self = [super init]))
        return nil;

    self.clipsToBounds = YES;

    return self;
}

- (void)didLoad
{
    [super didLoad];

    NSLog(@"View controller log")
}
@end

Insert the provided CSS into this document only

layout.html¶

{% block extrahead -%}
    {%- if bootstrap_css_list %}
    <style type="text/css">
    {% for css in bootstrap_css_list -%}
    {{ css }}
    {% endfor -%}
    </style>
    {%- endif %}
{%- endblock %}

Option List¶

.. css::

  <Content>

CSS rendered into the current document only¶

.. container:: jumbotron
  :name: css-script-jumbotron

  :h2:`Custom styled jumbotron`

.. css::

  #css-script-jumbotron { background: #8da9d0; }

Custom styled jumbotron

https://help.github.com/articles/about-gists/#embedding-gists

Option List¶

.. gist:: <URL>

.. gist:: https://gist.github.com/lakhman/b6e42563a15bc71827f5b0ead82aa886

Insert the provided Javascript into this document only

layout.html¶

{% block extrahead -%}
    {%- if bootstrap_js_list %}
    <script type="text/javascript">
    {% for js in bootstrap_js_list -%}
    {{ js }}
    {% endfor -%}
    </script>
    {%- endif %}
{%- endblock %}

Option List¶

.. javascript::

  <Content>

JS rendered into the current document only¶

.. container:: jumbotron
  :name: js-script-jumbotron

  .. button:: :fa:`mouse-pointer fw` Click Me!
    :class: primary large block
    :name: custom-button-for-doc

.. javascript::

    $('#custom-button-for-doc').click(function(){
        alert('Custom javascript for this document only')
    })

http://doc.jsfiddle.net/use/embedding.html

Option List¶

.. jsfiddle:: <Embed_URL>
  :height: <Height> [600, 600px]

Embed with a custom height¶

.. jsfiddle:: //jsfiddle.net/DTcHh/embedded/result,html/
  :height: 600px

This extension allows you to switch the current document layout, from sidebar to full-page for example
Sphinx always uses page.html, you can create your own and use it on a per document basis

Add the following page-custom.html template which extends from a different layout

_templates/page-custom.html¶

{%- extends "layout-sidebar.html" %}
{% block body %}
    {{ body }}
{% endblock %}

Option List¶

.. layout:: <Page Layout File>

.. layout:: page-custom.html

<!-- Will render the document into page-custom.html instead of page.html -->

Embed TED talks easily using the ted directive

Option List¶

.. ted:: <URL>
  :4by3: <Flag> {# default: 16by9 #}

.. ted:: https://www.ted.com/talks/richard_feynman

Add this CSS: https://dev.twitter.com/web/embedded-tweets/css

layout.html¶

<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

Option List¶

.. twitter-tweet:: <TweetID>
  :id: <TweetID>
  :text: <Text> {# PlaceholderText #}
  :date: <Text> {# PlaceholderDate #}
  :author: <Text> {# PlaceholderAuthor #}
  :align: <Alignment> [left, center, right]
  :dark: <Flag> {# Dark themed tweet #}

By default, all tweets are center aligned¶

.. twitter-tweet:: jack/20

https://twitter.com/jack/status/20
@jack

Demonstration of other options¶

.. twitter-tweet:: CIA/474971393852182528
    :align: right
    :text: We can neither confirm nor deny that this is our first tweet.
    :dark:

We can neither confirm nor deny that this is our first tweet.
@CIA

When set to hidden, links in a Tweet are not expanded to photo, video, or link previews¶

.. twitter-tweet:: hoesluvfreewifi/899703073484013568
  :cards: hidden
  :link-color: #d14

https://twitter.com/hoesluvfreewifi/status/899703073484013568
@hoesluvfreewifi

.. twitter-tweet:: hoesluvfreewifi/899703073484013568

https://twitter.com/hoesluvfreewifi/status/899703073484013568
@hoesluvfreewifi

.. twitter-tweet:: elonmusk/916234148104118272
  :conversation: none

https://twitter.com/elonmusk/status/916234148104118272
@elonmusk

.. twitter-tweet:: elonmusk/916234148104118272
  :link-color: #d14

https://twitter.com/elonmusk/status/916234148104118272
@elonmusk

https://developers.google.com/youtube/player_parameters

Option List¶

.. youtube:: <YouTubeID>
  :class: <Classes>
  :4by3: <Flag> {# Show as 4by3, 16by9 default #}

  :autohide: <YouTube_Player_Parameter>
  :autoplay: <YouTube_Player_Parameter>
  :cc_load_policy: <YouTube_Player_Parameter>
  :color: <YouTube_Player_Parameter>
  :controls: <YouTube_Player_Parameter>
  :disablekb: <YouTube_Player_Parameter>
  :enablejsapi: <YouTube_Player_Parameter>
  :end: <YouTube_Player_Parameter>
  :fs: <YouTube_Player_Parameter>
  :hl: <YouTube_Player_Parameter>
  :iv_load_policy: <YouTube_Player_Parameter>
  :list: <YouTube_Player_Parameter>
  :listtype: <YouTube_Player_Parameter>
  :loop: <YouTube_Player_Parameter>
  :modestbranding: <YouTube_Player_Parameter>
  :playlist: <YouTube_Player_Parameter>
  :rel: <YouTube_Player_Parameter>
  :showinfo: <YouTube_Player_Parameter>
  :start: <YouTube_Player_Parameter>
  :theme: <YouTube_Player_Parameter>

.. youtube::
  :listtype: search
  :list: deep learning

Installation¶

Codepen¶

Code Block¶

CSS¶

Gist¶

Javascript¶

JSFiddle¶

Layout¶

Ted¶

Twitter¶

Youtube¶

Installation¶

Adsense¶

Codepen¶

Code Block¶

CSS¶

Gist¶

Javascript¶

JSFiddle¶

Layout¶

Ted¶

Twitter¶

Youtube¶