Fix CSS highlighting

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -124,9 +124,9 @@ const BrewRenderer = createClass({
 
 	renderPage : function(pageText, index){
 		if(this.props.renderer == 'legacy')
-			return <div className='phb' id={`p${index + 1}`} dangerouslySetInnerHTML={{ __html: MarkdownLegacy.render(pageText) }} key={index} />;
+			return <div className='phb page' id={`p${index + 1}`} dangerouslySetInnerHTML={{ __html: MarkdownLegacy.render(pageText) }} key={index} />;
 		else
-			return <div className='phb3' id={`p${index + 1}`} dangerouslySetInnerHTML={{ __html: Markdown.render(pageText) }} key={index} />;
+			return <div className='phb3 page' id={`p${index + 1}`} dangerouslySetInnerHTML={{ __html: Markdown.render(pageText) }} key={index} />;
 	},
 
 	renderPages : function(){

client/homebrew/homebrew.jsx

@@ -45,7 +45,7 @@ const Homebrew = createClass({
 						<Route path='/edit/:id' component={(routeProps)=><EditPage id={routeProps.match.params.id} brew={this.props.brew} />}/>
 						<Route path='/share/:id' component={(routeProps)=><SharePage id={routeProps.match.params.id} brew={this.props.brew} />}/>
 						<Route path='/new/:id' component={(routeProps)=><NewPage id={routeProps.match.params.id} brew={this.props.brew} />}/>
-						<Route path='/new' exact component={NewPage}/>
+						<Route path='/new' exact component={(routeProps)=><NewPage brew={this.props.brew} />}/>
 						<Route path='/user/:username' component={(routeProps)=><UserPage username={routeProps.match.params.username} brews={this.props.brews} />}/>
 						<Route path='/print/:id' component={(routeProps)=><PrintPage brew={this.props.brew} query={queryString.parse(routeProps.location.search)} /> } />
 						<Route path='/print' exact component={(routeProps)=><PrintPage query={queryString.parse(routeProps.location.search)} /> } />

client/homebrew/pages/newPage/newPage.jsx

@@ -3,6 +3,7 @@ const React = require('react');
 const createClass = require('create-react-class');
 const _ = require('lodash');
 const request = require('superagent');
+const dedent = require('dedent-tabs').default;
 
 const Markdown = require('naturalcrit/markdown.js');
 
@@ -16,15 +17,19 @@ const SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
 const Editor = require('../../editor/editor.jsx');
 const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 
-
 const KEY = 'homebrewery-new';
 
 const NewPage = createClass({
 	getDefaultProps : function() {
 		return {
 			brew : {
-				text      : '',
+				text  : '',
-				style     : '',
+				style : dedent`
+										/*=======---  Example CSS styling  ---=======*/
+										/* Any CSS here will apply to your document! */
+										.myExampleClass {
+							 			  color: black;
+										}`,
 				shareId   : null,
 				editId    : null,
 				createdAt : null,
@@ -52,7 +57,8 @@ const NewPage = createClass({
 				tags        : this.props.brew.tags || '',
 				published   : false,
 				authors     : [],
-				systems     : this.props.brew.systems || []
+				systems     : this.props.brew.systems || [],
+				renderer    : this.props.brew.renderer || 'legacy'
 			},
 
 			isSaving   : false,
@@ -214,7 +220,7 @@ const NewPage = createClass({
 						onMetaChange={this.handleMetaChange}
 						renderer={this.state.brew.renderer}
 					/>
-					<BrewRenderer text={this.state.brew.text} errors={this.state.htmlErrors} renderer={this.state.brew.renderer} />
+					<BrewRenderer text={this.state.brew.text} style={this.state.brew.style} renderer={this.state.brew.renderer} errors={this.state.htmlErrors}/>
 				</SplitPane>
 			</div>
 		</div>;

scripts/project.json

@@ -10,6 +10,7 @@
 		"classnames",
 		"codemirror",
 		"codemirror/mode/gfm/gfm.js",
+		"codemirror/mode/css/css.js",
 		"codemirror/mode/javascript/javascript.js",
 		"moment",
 		"superagent",

server.js

@@ -9,6 +9,7 @@ const GoogleActions = require('./server/googleActions.js');
 const serveCompressedStaticAssets = require('./server/static-assets.mv.js');
 const sanitizeFilename = require('sanitize-filename');
 const asyncHandler = require('express-async-handler');
+const dedent = require('dedent-tabs').default;
 
 //Get the brew object from the HB database or Google Drive
 const getBrewFromId = asyncHandler(async (id, accessType)=>{
@@ -30,6 +31,14 @@ const getBrewFromId = asyncHandler(async (id, accessType)=>{
 		const index = brew.text.indexOf('```\n\n');
 		brew.style = brew.text.slice(7, index - 1);
 		brew.text = brew.text.slice(index + 5);
+	} else {
+		brew.style = dedent`
+			/*=======---  Example CSS styling  ---=======*/
+			/* Any CSS here will apply to your document! */
+			
+			.myExampleClass {
+ 			  color: black;
+			}`;
 	}
 	return brew;
 });