test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-01 11:39:28 +08:00
Code Issues Actions 69 Packages Projects Releases Wiki Activity

feat: show CSS code

Browse Source
This commit is contained in:
Benjy Cui 2016-03-01 17:42:23 +08:00
parent 138d71c3db
commit 428ad993f6
2 changed files with 25 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
site/common/styles/common.less
View File

@ -16,6 +16,10 @@
overflow: hidden;
}
.sidebar {
padding-bottom: 50px;
}
.sidebar .chinese {
font-size: 12px;
margin-left: 6px;

26
site/component/Demo/index.jsx
View File

@ -20,13 +20,18 @@ export default class Demo extends React.Component {
}
render() {
const { id, preview, title, intro, code, expand } = this.props;
const { id, preview, title, intro, code, style, expand } = this.props;
const introChildren = intro.map(utils.objectToComponent);
const highlightedCode = hljs.highlight('javascript', code).value;
return (
<section className="code-box" id={id}>
<section className="code-box-demo">
{ preview() }
{
!!style ?
<style dangerouslySetInnerHTML={{ __html: style }} /> :
null
}
</section>
<section className="code-box-meta markdown">
<div className="code-box-title">
@ -40,10 +45,21 @@ export default class Demo extends React.Component {
<code className="javascript" dangerouslySetInnerHTML={{
__html: highlightedCode,
}} />
</pre>
</div>
</Collapse.Panel>
</Collapse>
</pre>
</div>
{
!!style ?
<div className="highlight">
<pre>
<code className="css" dangerouslySetInnerHTML={{
__html: hljs.highlight('css', style).value,
}} />
</pre>
</div> :
null
}
</Collapse.Panel>
</Collapse>
</section>
</section>
);