new: update css to have better rendering in read mode.

web_widget_text_markdown/static/src/css/main.css

@@ -1,26 +1,328 @@
 .openerp .oe_form .oe_form_field_markdown .oe_form_text_content {
-    text-overflow: ellipsis;
-    display: inline-block;
-    white-space: pre-wrap;
-    overflow-x: hidden;
-    width: 100%;
-    background-color: #eee;
-    padding: 10px;
+  text-overflow: ellipsis;
+/*  display: inline-block;
+  white-space: pre-wrap;
+  overflow-x: hidden; */
+  width: 100%;
+  }
+
+.openerp .markdown-body thead th:first-child {
+      border-left: 1px solid #ddd !important;
 }
 
 .oe_form_text_markdown pre {
-    background-color: #333;
-    padding: 10px;
+  background-color: #333;
+  padding: 10px;
 }
-
-.md-editor.md-fullscreen-mode .md-input, .md-editor.md-fullscreen-mode .md-preview {
-    font-size: 13px!important;
+.md-editor.md-fullscreen-mode .md-input,
+.md-editor.md-fullscreen-mode .md-preview {
+  font-size: 13px!important;
 }
-
 .md-editor.md-fullscreen-mode {
-    margin-top: 50px;
+  margin-top: 50px;
 }
-
 .md-editor.md-fullscreen-mode .md-header {
-    top: 70px;
+  top: 70px;
+}
+.markdown-body {
+  font-size: 15px;
+  line-height: 1.7;
+  overflow: hidden;
+}
+.markdown-body > *:first-child {
+  margin-top: 0 !important;
+}
+.markdown-body > *:last-child {
+  margin-bottom: 0 !important;
+}
+.markdown-body a.absent {
+  color: #c00;
+}
+.markdown-body a.anchor {
+  display: block;
+  padding-left: 30px;
+  margin-left: -30px;
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+}
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+  margin: 1em 0 15px;
+  padding: 0;
+  font-weight: bold;
+  line-height: 1.7;
+  cursor: text;
+  position: relative;
+}
+.markdown-body h1 .octicon-link,
+.markdown-body h2 .octicon-link,
+.markdown-body h3 .octicon-link,
+.markdown-body h4 .octicon-link,
+.markdown-body h5 .octicon-link,
+.markdown-body h6 .octicon-link {
+  display: none;
+  color: #000;
+}
+.markdown-body h1:hover a.anchor,
+.markdown-body h2:hover a.anchor,
+.markdown-body h3:hover a.anchor,
+.markdown-body h4:hover a.anchor,
+.markdown-body h5:hover a.anchor,
+.markdown-body h6:hover a.anchor {
+  text-decoration: none;
+  line-height: 1;
+  padding-left: 0;
+  margin-left: -22px;
+  top: 15%;
+}
+.markdown-body h1:hover a.anchor .octicon-link,
+.markdown-body h2:hover a.anchor .octicon-link,
+.markdown-body h3:hover a.anchor .octicon-link,
+.markdown-body h4:hover a.anchor .octicon-link,
+.markdown-body h5:hover a.anchor .octicon-link,
+.markdown-body h6:hover a.anchor .octicon-link {
+  display: inline-block;
+}
+.markdown-body h1 tt,
+.markdown-body h1 code,
+.markdown-body h2 tt,
+.markdown-body h2 code,
+.markdown-body h3 tt,
+.markdown-body h3 code,
+.markdown-body h4 tt,
+.markdown-body h4 code,
+.markdown-body h5 tt,
+.markdown-body h5 code,
+.markdown-body h6 tt,
+.markdown-body h6 code {
+  font-size: inherit;
+}
+.markdown-body h1 {
+  font-size: 2.5em;
+  border-bottom: 1px solid #ddd;
+}
+.markdown-body h2 {
+  font-size: 2em;
+  border-bottom: 1px solid #eee;
+}
+.markdown-body h3 {
+  font-size: 1.5em;
+}
+.markdown-body h4 {
+  font-size: 1.2em;
+}
+.markdown-body h5 {
+  font-size: 1em;
+}
+.markdown-body h6 {
+  color: #777;
+  font-size: 1em;
+}
+.markdown-body p,
+.markdown-body blockquote,
+.markdown-body ul,
+.markdown-body ol,
+.markdown-body dl,
+.markdown-body table,
+.markdown-body pre {
+  margin: 15px 0;
+}
+.markdown-body hr {
+  border: 0 none;
+  color: #ccc;
+  height: 4px;
+  padding: 0;
+  margin: 15px 0;
+}
+.markdown-body li p.first {
+  display: inline-block;
+}
+.markdown-body ul,
+.markdown-body ol {
+  padding-left: 30px;
+}
+.markdown-body ul.no-list,
+.markdown-body ol.no-list {
+  list-style-type: none;
+  padding: 0;
+}
+.markdown-body ul ul,
+.markdown-body ul ol,
+.markdown-body ol ol,
+.markdown-body ol ul {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.markdown-body dl {
+  padding: 0;
+}
+
+.openerp .oe-view-manager .oe-view-manager-content .markdown-body a.btn {
+    color: white;
+}
+
+.markdown-body dl dt {
+  font-size: 14px;
+  font-weight: bold;
+  font-style: italic;
+  padding: 0;
+  margin-top: 15px;
+}
+.markdown-body dl dd {
+  margin-bottom: 15px;
+  padding: 0 15px;
+}
+.markdown-body blockquote {
+  border-left: 4px solid #DDD;
+  padding: 0 15px;
+  color: #777;
+}
+.markdown-body blockquote >:first-child {
+  margin-top: 0px;
+}
+.markdown-body blockquote >:last-child {
+  margin-bottom: 0px;
+}
+.markdown-body table {
+  width: 100%;
+  overflow: auto;
+  display: block;
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+.markdown-body table th {
+  font-weight: bold;
+}
+.markdown-body table th,
+.markdown-body table td {
+  border: 1px solid #ddd;
+  padding: 6px 13px;
+}
+.markdown-body table tr {
+  border-top: 1px solid #ccc;
+  background-color: #fff;
+}
+.markdown-body table tr:nth-child(2n) {
+  background-color: #f8f8f8;
+}
+.markdown-body img {
+  max-width: 100%;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.markdown-body span.frame {
+  display: block;
+  overflow: hidden;
+}
+.markdown-body span.frame > span {
+  border: 1px solid #ddd;
+  display: block;
+  float: left;
+  overflow: hidden;
+  margin: 13px 0 0;
+  padding: 7px;
+  width: auto;
+}
+.markdown-body span.frame span img {
+  display: block;
+  float: left;
+}
+.markdown-body span.frame span span {
+  clear: both;
+  color: #333;
+  display: block;
+  padding: 5px 0 0;
+}
+.markdown-body span.align-center {
+  display: block;
+  overflow: hidden;
+  clear: both;
+}
+.markdown-body span.align-center > span {
+  display: block;
+  overflow: hidden;
+  margin: 13px auto 0;
+  text-align: center;
+}
+.markdown-body span.align-center span img {
+  margin: 0 auto;
+  text-align: center;
+}
+.markdown-body span.align-right {
+  display: block;
+  overflow: hidden;
+  clear: both;
+}
+.markdown-body span.align-right > span {
+  display: block;
+  overflow: hidden;
+  margin: 13px 0 0;
+  text-align: right;
+}
+.markdown-body span.align-right span img {
+  margin: 0;
+  text-align: right;
+}
+.markdown-body span.float-left {
+  display: block;
+  margin-right: 13px;
+  overflow: hidden;
+  float: left;
+}
+.markdown-body span.float-left span {
+  margin: 13px 0 0;
+}
+.markdown-body span.float-right {
+  display: block;
+  margin-left: 13px;
+  overflow: hidden;
+  float: right;
+}
+.markdown-body span.float-right > span {
+  display: block;
+  overflow: hidden;
+  margin: 13px auto 0;
+  text-align: right;
+}
+.markdown-body code,
+.markdown-body tt {
+  margin: 0 2px;
+  padding: 0px 5px;
+  border: 1px solid #ddd;
+  background-color: #f8f8f8;
+  border-radius: 3px;
+}
+.markdown-body code {
+  white-space: nowrap;
+}
+.markdown-body pre > code {
+  margin: 0;
+  padding: 0;
+  white-space: pre;
+  border: none;
+  background: transparent;
+}
+.markdown-body .highlight pre,
+.markdown-body pre {
+  background-color: #f8f8f8;
+  border: 1px solid #ddd;
+  font-size: 13px;
+  line-height: 19px;
+  overflow: auto;
+  padding: 6px 10px;
+  border-radius: 3px;
+}
+.markdown-body pre code,
+.markdown-body pre tt {
+  margin: 0;
+  padding: 0;
+  background-color: transparent;
+  border: none;
 }

web_widget_text_markdown/static/src/xml/bootstrap_markdown.xml

@@ -5,7 +5,7 @@
 
     <t t-name="FieldMarkDown">
 
-        <div t-attf-class="oe_form_field oe_form_field_text oe_form_field_markdown #{widget.get('effective_readonly')?'web_markdown_read_only':'web_markdown_edit'}" t-att-style="widget.node.attrs.style">
+        <div t-attf-class="oe_form_field oe_form_field_markdown markdown-body" t-att-style="widget.node.attrs.style">
 
             <t t-if="!widget.get('effective_readonly')">
                 <textarea rows="6"