Updated the Table style to remove local conflicts

ghiscoding · ghiscoding · commit 3395a70a118c · 2016-07-27T12:45:49.000-04:00
The previous CSS was using generic "table &gt; ..." which could conflict
with regular tables which might be unwanted. You now have to use the
wrapper class of "markdown" or "marked" for your preview &lt;div&gt;
diff --git a/example/index.html b/example/index.html
@@ -3,13 +3,14 @@
 	<head>
 	  <meta charset="utf-8">
 	  <title>Angular-Mardown-Editor (ghiscoding)</title>
+		<!-- CSS Stylesheet -->
+		<link rel="stylesheet" href="../styles/angular-markdown-editor.css">
 		<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
 		<link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css">
 		<link rel="stylesheet" href="../node_modules/bootstrap-markdown/css/bootstrap-markdown.min.css">
 		<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/tomorrow.min.css">
-	  <link rel="stylesheet" href="../styles/angular-markdown-editor.css">
 
-		<!-- external librairies CDN -->
+		<!-- Scripts -->
 		<script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"></script>
 		<script type="text/javascript" src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 		<script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
@@ -33,7 +34,7 @@ <h1>Angular Markdown Editor</h1>
 
 			<hr/>
 
-			<marked>
+			<marked class="markdown">
 			    ## Angular Markdown Editor Directive
 			    *It works!*
 					#### Markdown [cheatsheet](//github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
@@ -51,15 +52,15 @@ <h1>Angular Markdown Editor</h1>
 				<div class="col-md-12 col-lg-6 fill">
 						<div class="form-group">
 								<label for="comment">Preview Result:</label>
-								<div marked="markdown" class="outline" style="padding: 20px">
+								<div marked="markdown" class="markdown outline" style="padding: 20px">
 								</div>
 						</div>
 				</div>
 		</div>
 
 		<hr/>
 
-		<div class="outline" style="padding:20px; margin-bottom: 20px" marked src="'readme.md'">
+		<div class="markdown outline" style="padding:20px; margin-bottom: 20px" marked src="'readme.md'">
 		</div>
 
 		</div>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-markdown-editor",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "author": "Ghislain B.",
   "description": "Angular Markdown Editor, all-in-one Markdown Editor and Preview",
   "main": "app.js",
diff --git a/readme.md b/readme.md
@@ -1,5 +1,5 @@
 # Angular Markdown Editor (Directive)
-`1.0.1`
+`1.0.2`
 
 ## What do we have?
 I have put together a few libraries and tools to make a convenient "all in one" WYSIWYG Markdown Editor and preview. All of that with a simple AngularJS Directive call. I plan to use this mainly for online documentation but it could be useful for many other reasons. Also planning to add a 1-click button for simple Copy+Paste to email.
@@ -21,11 +21,39 @@ _Some of the dependencies were added by hand to this package (because they don't
 PM> Install-Package Angular-Markdown-Editor
 ```
 
+### Include Styles &amp; Scripts
+_NOTE: Unfortunately, the "highlight.js" npm module doesn't seem to have proper bundles, so it's easier for us get the minified CSS and JS files directly from CDN where they are bundled correctly. As for the highlight style, if you want to use another style, then you can replace the "...xxx.min.css" by the name you want to use, for example if we want to use "github", that would be "highlight.js/.../github.min.css"_
+```html
+<!-- CSS Stylesheet -->
+<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
+<link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css">
+<link rel="stylesheet" href="../node_modules/bootstrap-markdown/css/bootstrap-markdown.min.css">
+<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/github.min.css">
+<link rel="stylesheet" href="../node_modules/angular-markdown-editor/styles/angular-markdown-editor.css">
+
+<!-- Scripts -->
+<script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"></script>
+<script type="text/javascript" src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
+<script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
+<script type="text/javascript" src="../node_modules/angular-sanitize/angular-sanitize.min.js"></script>
+<script type="text/javascript" src="../node_modules/marked/lib/marked.js"></script>
+<script type="text/javascript" src="../node_modules/angular-marked/dist/angular-marked.min.js"></script>
+<script type="text/javascript" src="../node_modules/bootstrap-markdown/js/bootstrap-markdown.js"></script>
+<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/highlight.min.js"></script>
+<script type="text/javascript" src="../node_modules/angular-highlightjs/src/angular-highlightjs.js"></script>
+<script type="text/javascript" src="../node_modules/angular-markdown-editor/src/angular-markdown-editor.js"></script>
+```
+
 ### Inside the HTML
 Simply create a `<textarea>` with an `ngModel` and a call to the Directive.
 At the end, all you need is:
 ```
+<!-- editor -->
 <textarea ng-model="markdown" markdown-editor="" rows="10"></textarea>
+
+<-- preview... be sure to include the "angular-markdown-editor.css" style -->
+<!-- use "markdown" or "marked" on your <div> preview to show Tables correctly -->
+<div marked="markdown" class="markdown" style="padding: 20px"></div>
 ```
 
 ### Editor extra options
@@ -37,7 +65,7 @@ or multiple options
 ```
 
 ### Editor extra buttons
-I really thought that some buttons were missing to go a great job (~~Strikethrough~~ &amp; **Table**). So I added them within the directive as an option. They are not enabled by default, so you will need to enable them manually if you do want to use them with the option of `addExtraButtons`.
+I really thought that some buttons were missing to go a great job (~~Strikethrough~~ &amp; **Table**). So I added them within the directive as an option. They are not enabled by default, so you will need to enable them manually, that is if you do want to use them. The option argument is `addExtraButtons` to `true`.
 ```
 <textarea markdown-editor="{addExtraButtons: true, 'iconlibrary': 'fa'}"...
 ```
diff --git a/styles/angular-markdown-editor.css b/styles/angular-markdown-editor.css
@@ -14,22 +14,27 @@ textarea {
 }
 
 /* http://johnsardine.com/freebies/dl-html-css/simple-little-tab/ */
-table a:link {
+.marked > table a:link,
+.markdown > table a:link {
 	color: #666;
 	font-weight: bold;
 	text-decoration:none;
 }
-table a:visited {
+.marked > table a:visited,
+.markdown > table a:visited {
 	color: #999999;
 	font-weight:bold;
 	text-decoration:none;
 }
-table a:active,
-table a:hover {
+.marked > table a:active,
+.marked > table a:hover,
+.markdown > table a:active,
+.markdown > table a:hover {
 	color: #bd5a35;
 	text-decoration:underline;
 }
-table {
+.marked > table,
+.markdown > table {
 	font-family:Arial, Helvetica, sans-serif;
 	color:#606060;
 	font-size:15px;
@@ -41,36 +46,43 @@ table {
 	-webkit-border-radius:3px;
 	border-radius:3px;
 }
-table th {
+.marked > table th,
+.markdown > table th {
 	padding:8px 15px;
 	border-bottom:1px solid #e0e0e0;
 	background: #f6f6f6;
   color:#333;
 }
-table th:first-child {
+.marked > table th:first-child,
+.markdown > table th:first-child {
 	text-align: left;
 	padding-left:10px;
 }
-table tr:first-child th:first-child {
+.marked > table tr:first-child th:first-child,
+.markdown > table tr:first-child th:first-child {
 	-moz-border-radius-topleft:3px;
 	-webkit-border-top-left-radius:3px;
 	border-top-left-radius:3px;
 }
-table tr:first-child th:last-child {
+.marked > table tr:first-child th:last-child,
+.markdown > table tr:first-child th:last-child {
 	-moz-border-radius-topright:3px;
 	-webkit-border-top-right-radius:3px;
 	border-top-right-radius:3px;
 }
-table tr {
+.marked > table tr,
+.markdown > table tr {
 	text-align: center;
 	padding-left:10px;
 }
-table td:first-child {
+.marked > table td:first-child,
+.markdown > table td:first-child {
 	text-align: left;
 	padding-left:10px;
 	border-left: 0;
 }
-table td {
+.marked > table td,
+.markdown > table td {
 	padding:8px;
 	border-top: 1px solid #ffffff;
 	border-bottom:1px solid #e0e0e0;
@@ -79,23 +91,28 @@ table td {
 	background: #fff;
 }
 
-table tr:nth-child(2n) td {
+.marked > table tr:nth-child(2n) td,
+.markdown > table tr:nth-child(2n) td {
 	background: #f8f8f8;
 }
-table tr:last-child td {
+.marked > table tr:last-child td,
+.markdown > table tr:last-child td {
 	border-bottom:0;
 }
-table tr:last-child td:first-child {
+.marked > table tr:last-child td:first-child,
+.markdown > table tr:last-child td:first-child {
 	-moz-border-radius-bottomleft:3px;
 	-webkit-border-bottom-left-radius:3px;
 	border-bottom-left-radius:3px;
 }
-table tr:last-child td:last-child {
+.marked > table tr:last-child td:last-child,
+.markdown > table tr:last-child td:last-child {
 	-moz-border-radius-bottomright:3px;
 	-webkit-border-bottom-right-radius:3px;
 	border-bottom-right-radius:3px;
 }
-table tr:hover td {
+.marked > table tr:hover td,
+.markdown > table tr:hover td {
 	background: #f4f4f4;
 	background: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#f2f2f2));
 	background: -moz-linear-gradient(top,  #f4f4f4,  #f2f2f2);

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "angular-markdown-editor",`
`3`		`- "version": "1.0.1",`
	`3`	`+ "version": "1.0.2",`
`4`	`4`	`"author": "Ghislain B.",`
`5`	`5`	`"description": "Angular Markdown Editor, all-in-one Markdown Editor and Preview",`
`6`	`6`	`"main": "app.js",`