Wrapping markdown-content inside DIV wrapper with CLASS and ID

[softvar]

Since all the blog-posts are written in markdown in hyde, I have come across a weird problem. I need to wrap the MARKDOWNed content within a div and provide a class and id to it.

For eg:

Why hyde
--------------

### Pros

It saves a lot of considerable amount of time rather writing from the scratch.

I want to wrap the above code as:

Why hyde
--------------

<div id="scroll" class="spyScroll">

### Pros

It saves a lot of considerable amount of time rather writing from the scratch.

</div>

But when I try the above method, Markdown inside the div doesn't work. I need this since I have to mark that content being active and show the corresponding link being highlighted in Table of Contents on the left side of blog-post.

Any help regarding the same would be highly appreciated. @lakshmivyas

Thanks!

[navilan]

Hi,

You can use the passthrough extension from the hydedown library to deal with this and similar issues if that appeals to you: https://github.com/hyde/hydedown/blob/master/hydedown/passthrough.py#L14-L16

[softvar]

Hey,

Thanks for this. It seems exactly what I needed, but I'm unable to use/integrate it with my config. Where to import and where to use. I know how to use already available plugins. But this seems something I have to dig more into the source code to use this extension?

Here's my site.yaml

mode: development
media_root: media # Relative path from content folder.
media_url: /media # URL where the media files are served from.
base_url: / # The base url for autogenerated links.
plugins:
    - hyde.ext.plugins.meta.MetaPlugin
    - hyde.ext.plugins.auto_extend.AutoExtendPlugin
    - hyde.ext.plugins.sorter.SorterPlugin
    - hyde.ext.plugins.tagger.TaggerPlugin
    - hyde.ext.plugins.syntext.SyntextPlugin
    - hyde.ext.plugins.textlinks.TextlinksPlugin
context:
    data:
        tweet_via: Varun Malhotra
        menu:
            -
                name: Home
                description: Home Page
                css_class: home
                type: page
                url: index.html

            -
                name: Blog
                description: Recent
                css_class: blog
                type: node
                url: blog

            -
                name: Archive
                description: Archive
                css_class: archive
                type: node
                url: archive

            -
                name: Projects
                description: Projects
                css_class: portfolio
                type: node
                url: portfolio
            -
                name: About
                description: About
                css_class: about
                type: node
                url: about
            -
                name: Contact
                description: Contact
                css_class: contact
                type: node
                url: contact
meta:
    nodemeta: meta.yaml
    created: !!timestamp 2010-01-01 00:00:00
    author: Varun Malhotra
    description: Varun Malhotra's Blog
sorter:
    time:
        attr:
            - meta.created
        reverse: true
        filters:
            source.kind: html
            meta.listable: true
tagger:
    sorter: time
    archives:
        blog:
            source: blog
            target: blog/tags
            template: tagged_posts.j2
            archive_extension: html
            meta:
                listable: false

[navilan]

Hi,

Here is my markdown config for hyde in site.yaml:

markdown:
  extensions:
    - attr_list
    - hydedown.passthrough
    - def_list
    - headerid
    - hydedown.sections
    - toc
extension_configs:
  hydedown.sections:
    max_level: 4

If you just want the passthrough extension:

markdown:
  extensions:
    - hydedown.passthrough

[softvar]

Thanks @lakshmivyas ! Just after pip install hydedown and adding the code to site.yaml, everything worked like a charm.

:+1: for the help!

Just curious, you mentioned toc as one of the extensions, is there any such Table of Contents plugin for the blogs too for hyde?

[navilan]

hyde doesn't have a toc extension (although you can get something similar with grouper/sorter combo for the whole site). The one above is the toc extension for markdown. With passthrough extension to help, a whole page/post could be markdown with a lot of literal html in between and markdown can generate the toc for you.

[softvar]

Sounds good!