mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 14:13:37 +08:00
Code Issues Actions 28 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; overflow: hidden;
} }
.sidebar {
padding-bottom: 50px;
}
.sidebar .chinese { .sidebar .chinese {
font-size: 12px; font-size: 12px;
margin-left: 6px; margin-left: 6px;

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

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