card.cjsx in carte-server-0.0.4

- old
+ new

@@ -1,9 +1,10 @@
 # @cjsx React.DOM 
 React = require('react')
 Edit = require('./edit')
 ModalTrigger = require('react-bootstrap/lib/ModalTrigger')
+markdownIt = require('markdown-it')(linkify: true)
 
 module.exports = React.createClass
   displayName: 'Card'
 
   componentDidMount: ->
@@ -31,11 +32,11 @@
       #style.color = 'red'
       style.borderColor = '#ccc'
     <div className='col-sm-4' style={padding:'5px'} onMouseOver={@onMouseOver} onMouseLeave={@onMouseLeave}>
       <div className='list-group' style={margin:'0px',padding:'0px'}>
         <div className='list-group-item' style={style}>
-          <p>
+          <div>
             {
               if @props.card.get('focused')
                 <i className='glyphicon glyphicon-star' style={marginRight:'5px'} />
             }
             <strong>
@@ -51,12 +52,14 @@
               &nbsp;
               <a href={'#/' + @props.card.get('title')}>
                 <i className='glyphicon glyphicon-link' />
               </a>
             </span>
-          </p>
-          <p style={overflow:'scroll',width:'100%',height:'80%',wordWrap:'break-word'}>
-            {@props.card.get('content')}
-          </p>
+          </div>
+          <div style={overflow:'scroll',width:'100%',height:'80%',wordWrap:'break-word'}>
+            <p>
+              <div dangerouslySetInnerHTML={__html: markdownIt.render @props.card.get('content')} />
+            </p>
+          </div>
         </div>
       </div>
     </div>