[Doc Enhancement] Introduce MarkdownElement mui#2224

docs/package.json

@@ -15,8 +15,11 @@
   },
   "dependencies": {
     "codemirror": "^5.5.0",
+    "github-markdown-css": "^2.1.0",
+    "hightlight.js": "^8.9.1",
     "history": "^1.11.1",
     "intl": "^1.0.1",
+    "marked": "^0.3.5",
     "react-addons-perf": "^0.14.0",
     "react-dom": "^0.14.0",
     "react-motion": "^0.3.1",

docs/src/app/components/markdown-element.jsx

@@ -0,0 +1,45 @@
+const React = require('react');
+let { Paper } = require('material-ui');
+require('github-markdown-css/github-markdown.css');
+import marked from 'marked';
+
+const MarkdownElement = React.createClass({
+  propTypes: {
+    text: React.PropTypes.string.isRequired,
+  },
+  getDefaultProps() {
+    return {
+      text: '',
+    };
+  },
+
+
+  componentWillMount() {
+    marked.setOptions({
+      gfm: true,
+      tables: true,
+      breaks: false,
+      pedantic: false,
+      sanitize: true,
+      smartLists: true,
+      smartypants: false,
+      highlight: function (code) {
+                   return require('highlight.js').highlightAuto(code).value;
+                 },
+    });
+  },
+
+  render() {
+    const { text } = this.props,
+    html = marked(text || '');
+
+    return (
+      <Paper style = {{marginBottom: '22px', padding: '0 24px 24px 24px'}}>
+        <div className="markdown-body">
+          <div dangerouslySetInnerHTML={{__html: html}} />
+        </div>
+      </Paper>);
+  },
+});
+
+module.exports = MarkdownElement;

docs/src/app/components/markdown/lists-markdown.md

@@ -0,0 +1,31 @@
+# Headline 1
+
+This is a paragraph describing something.
+
+## Subheadline
+
+Detailes description here. And some code:
+```javascript
+const FileFolder = require('svg-icons/file/folder');
+const MoreVertIcon = require('svg-icons/navigation/more-vert');
+
+```
+
+
+```javascript
+export default class Login extends React.Component {
+
+  constructor() {
+    super()
+    this.state = {
+      user: '',
+      password: ''
+    };
+  }
+}
+function fancyAlert(arg) {
+  if(arg) {
+    $.facebox({div:'#foo'})
+  }
+}
+```

docs/src/app/components/pages/components/lists.jsx

@@ -2,6 +2,7 @@ const React = require('react');
 const mui = require('material-ui');
 const ComponentDoc = require('../../component-doc');
 const MobileTearSheet = require('../../mobile-tear-sheet');
+const MarkdownElement = require('../../markdown-element');
 const ActionAssignment = require('svg-icons/action/assignment');
 const ActionGrade = require('svg-icons/action/grade');
 const ActionInfo = require('svg-icons/action/info');
@@ -15,6 +16,8 @@ const EditorInsertChart = require('svg-icons/editor/insert-chart');
 const FileFolder = require('svg-icons/file/folder');
 const MoreVertIcon = require('svg-icons/navigation/more-vert');
 import { SelectableContainerEnhance } from 'material-ui/hoc/selectable-enhance';
+//require('github-markdown-css/github-markdown.css');
+
 
 const {
   Avatar,
@@ -33,6 +36,7 @@ const MenuItem = require('menus/menu-item');
 
 const { Colors } = Styles;
 const Code = require('lists-code');
+const ListsMarkdown = require('lists-markdown');
 const CodeExample = require('../../code-example/code-example');
 const CodeBlock = require('../../code-example/code-block');
 let SelectableList = SelectableContainerEnhance(List);
@@ -98,7 +102,6 @@ export default class ListsPage extends React.Component {
   }
 
   render() {
-
     let componentInfo = [
       {
         name: 'List Props',
@@ -766,6 +769,9 @@ export default class ListsPage extends React.Component {
             </SelectableList>
           </MobileTearSheet>
         </CodeExample>
+        <MarkdownElement text={`# Headline
+          No more info`}/>
+        <MarkdownElement text={ListsMarkdown} />
 
         <Paper style={{padding: '24px', marginBottom: '32px'}}>
         <div>

docs/webpack-dev-server.config.js

@@ -15,7 +15,7 @@ var config = {
   //Webpack config options on how to obtain modules
   resolve: {
     //When requiring, you don't need to add these extensions
-    extensions: ["", ".js", ".jsx", ".txt"],
+    extensions: ["", ".js", ".jsx", ".md", ".txt"],
     alias: {
       //material-ui requires will be searched in src folder, not in node_modules
       'material-ui': path.resolve(__dirname, '../src'),
@@ -27,7 +27,8 @@ var config = {
       path.resolve(__dirname, "node_modules"),
       path.resolve(__dirname, '../src'),
       path.resolve(__dirname, '../node_modules'),
-      path.resolve(__dirname, 'src/app/components/raw-code')
+      path.resolve(__dirname, 'src/app/components/raw-code'),
+      path.resolve(__dirname, 'src/app/components/markdown')
     ]
   },
   //Configuration for dev server
@@ -78,12 +79,21 @@ var config = {
             loader: 'raw-loader',
             include: path.resolve(__dirname, 'src/app/components/raw-code')
           },
+          {
+            test:/\.md$/,
+            loader: 'raw-loader',
+            include: path.resolve(__dirname, 'src/app/components/markdown')
+          },
           {
             test: /\.js$/, //All .js and .jsx files
             loader:'babel-loader?optional=runtime&stage=0', //react-hot is like browser sync and babel loads jsx and es6-7
             include: [__dirname, path.resolve(__dirname, '../src')], //include these files
             exclude: [nodeModulesPath]  //exclude node_modules so that they are not all compiled
           },
+          {
+            test: /\.css$/,
+            loader: "style-loader!css-loader"
+          },
         ]
   },
   eslint: {

docs/webpack-production.config.js

@@ -13,7 +13,7 @@ var config = {
   //Webpack config options on how to obtain modules
   resolve: {
     //When requiring, you don't need to add these extensions
-    extensions: ["", ".js", ".jsx", ".txt"],
+    extensions: ["", ".js", ".jsx", ".md", ".txt"],
     alias: {
       //material-ui requires will be searched in src folder, not in node_modules
       'material-ui': path.resolve(__dirname, '../src'),
@@ -25,7 +25,8 @@ var config = {
       "node_modules",
       path.resolve(__dirname, '../src'),
       path.resolve(__dirname, '../node_modules'),
-      path.resolve(__dirname, 'src/app/components/raw-code')
+      path.resolve(__dirname, 'src/app/components/raw-code'),
+      path.resolve(__dirname, 'src/app/components/markdown')
     ]
   },
   devtool: 'source-map',
@@ -85,6 +86,15 @@ var config = {
             loader: 'raw-loader',
             include: path.resolve(__dirname, 'src/app/components/raw-code')
           },
+          {
+            test:/\.md$/,
+            loader: 'raw-loader',
+            include: path.resolve(__dirname, 'src/app/components/markdown')
+          },
+          {
+            test: /\.css$/,
+            loader: "style-loader!css-loader"
+          },
         ]
   },
   eslint: {