The source shown is not the React (JSX) source.

[mik01aj]

Here's what I see:

The code is the rendered DOM. I'd expect to see the original source instead:

<Button color="purple">Btn Copy Gibson Reg; 1.2em</Button>

[webuniverseio]

@mik01aj, great suggestion. You can actually archive it in following way:

<section className="source_section">
    <h2>Button (Purple)</h2>
    <code className="src-html">
        {`<Button color="purple">Btn Copy Gibson Reg; 1.2em</Button>`}
    </code>
    <div className="source_example">
      <Button color="purple">Btn Copy Gibson Reg; 1.2em</Button>
    </div>
</section>

I'll add it to readme

[mik01aj]

Thanks, that's cool. 👍

The only thing I don't like in it is that I have to duplicate the example code.

I looked at this project's code and it's really tiny, so I think it would be easy for me to contribute :) I hope I'll have some time to add nice markdown support to react so I can write README.md with content like this:

## Button (Purple)

This is my button:
```example-jsx
<Button color="purple">Btn Copy Gibson Reg; 1.2em</Button>
```

[webuniverseio]

@mik01aj that's awesome 👍

[mik01aj]

I spotted another weird issue. When I use this:

                <code className="src-html">{`
                    <Avatar size="40" user={ exampleUser } />
                    <Avatar size="40" user={ exampleUserWithoutAvatar } />
                    <Avatar size="40" user={ exampleDeletedUser } />
                    <Avatar size="40" />
                `}</code>
                <div className="source_example">
                    <Avatar size="40" user={ exampleUser } />
                    <Avatar size="40" user={ exampleUserWithoutAvatar } />
                    <Avatar size="40" user={ exampleDeletedUser } />
                    <Avatar size="40" />
                </div>

It is rendered as:

However, when I change the last example to <Avatar size="40" user={} />, it starts working again:

[webuniverseio]

@mik01aj it is something to do with how react is handling html entities

[robhrt7]

Since all specs are always processed with EJS, you can use includes for this use case. Here's an example http://sourcejs.com/docs/base/#server-side-templating-engines.

I'm also currently working on rewamped source-code viewer, which will have an API for including content from different plugins and etc.

[mik01aj]

@operatino EJS doesn't help me much, but thanks :)

About the source code viewer refactoring - I think that it's a good idea. I think that regardless of the plugins, the documentation user will want to see the original source, just like written in the Markdown file. Even the browser-processed HTML is different than the original HTML, and with plugins it's only getting worse. So I guess this issue could be closed in favour of an issue in the main SourceJS repo.