zendframework / zf-mkdoc-theme

MkDocs theme and gh-pages automation scripts for ZF documentation
MIT License
13 stars 13 forks source link

Add markdown code tabs extension #68

Closed froschdesign closed 5 years ago

froschdesign commented 6 years ago

Problem

At the moment the documentation often only describes the standalone use of a component. Concrete examples are missing how the end user can use the component in his application.

Suggestion

Besides longer examples of integrations which needs extra pages in the documentation, we should also add an option for simpler code blocks. This can be done with a tabbed navigation; short "tabs".

Examples

Implementation

Markdown extension

The extension "Code Tabs" for Python-Markdown allows us to create code examples for different uses and application integrations. This extension comes with ready-to-use template for the CSS framework Bootstrap.

We must extend the configuration for MkDocs: (mkdocs.yml)

markdown_extensions:
    - markdown_fenced_code_tabs:
        template: bootstrap3
    - markdown.extensions.codehilite:
        use_pygments: False

Example

```php fct_label="Standalone Use"
$sql    = new Zend\Db\Sql\Sql($adapter, 'foo');
$select = $sql->select();
$select->where(['id' => 2]);
```
```php fct_label="TableGateway Use"
$select = $this->getSql()->select();
$select->where(['id' => 2]);
```

(GitHub ignores the extra markup fct_label in the preview.)

Preview

tabs

Documentation: https://yacir.github.io/markdown-fenced-code-tabs/

Bootstrap component

https://getbootstrap.com/docs/3.3/components/#nav-tabs

weierophinney commented 5 years ago

Addressed with #70; documentation can now start using nav tabs for code examples.

:octocat: Sent from GH.

froschdesign commented 5 years ago

@weierophinney I will create a documentation guide that covers features like this.