Cannot render PlantUML diagram when rendering DOM dynamically (like SPA)

[exKAZUu]

Some web apps (especially GitHub) renders web pages dynamically like SPA. However, this plugin doesn't render a diagram of PlantUML code inserted dynamically. So, I would recommend this plugin to detect DOM changes by watching DOM periodically (e.g. per 5 sec?) in order to render such a diagram.

Reproduction step

1. Open https://github.com/dai0304/pegmatite
2. Click Issues
3. Click this issue
4. Confirm the plugin doesn't render the following PlantUML code (If you open this issue page directly by entering the URL, then this plugin works well)

@startuml

[*] --> State1
State1 --> [*]
State1 : this is a string
State1 : this is another string

State1 -> State2
State2 --> [*]

@enduml

[exKAZUu]

Hmm, or this plugin should try re-rendering the diagram of the DOM element double-clicked by a user ... ?

[tsujimitsu]

I thought that using MutationObserver would solve it.

observer = new MutationObserver(function() {
    if (document.querySelectorAll("pre[lang='puml']").length > 0) {
        run(config);
    }
});

The following is a sample implementation. https://github.com/tsujimitsu/pegmatite/blob/support-github-dynamically/pegmatite/content-script.js#L201

Fired every time change github.com's DOM. This is bad point.