markup: fix styling for check-lists, ref #5513

rhodecode/lib/markdown_ext.py

@@ -1,62 +1,110 b''
 # -*- coding: utf-8 -*-
 
 # Copyright (C) 2010-2019 RhodeCode GmbH
 #
 # This program is free software: you can redistribute it and/or modify
 # it under the terms of the GNU Affero General Public License, version 3
 # (only), as published by the Free Software Foundation.
 #
 # This program is distributed in the hope that it will be useful,
 # but WITHOUT ANY WARRANTY; without even the implied warranty of
 # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 # GNU General Public License for more details.
 #
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 #
 # This program is dual-licensed. If you wish to learn more about the
 # RhodeCode Enterprise Edition, including its added features, Support services,
 # and proprietary license terms, please see https://rhodecode.com/licenses/
 
 import markdown
 
-from mdx_gfm import GithubFlavoredMarkdownExtension  # pragma: no cover
+from markdown.extensions import Extension
+from markdown.extensions.fenced_code import FencedCodeExtension
+from markdown.extensions.smart_strong import SmartEmphasisExtension
+from markdown.extensions.tables import TableExtension
+from markdown.extensions.nl2br import Nl2BrExtension
+
+import gfm
+
+
+class GithubFlavoredMarkdownExtension(Extension):
+    """
+    An extension that is as compatible as possible with GitHub-flavored
+    Markdown (GFM).
+
+    This extension aims to be compatible with the variant of GFM that GitHub
+    uses for Markdown-formatted gists and files (including READMEs). This
+    variant seems to have all the extensions described in the `GFM
+    documentation`_, except:
+
+    - Newlines in paragraphs are not transformed into ``br`` tags.
+    - Intra-GitHub links to commits, repositories, and issues are not
+      supported.
+
+    If you need support for features specific to GitHub comments and issues,
+    please use :class:`mdx_gfm.GithubFlavoredMarkdownExtension`.
+
+    .. _GFM documentation: https://guides.github.com/features/mastering-markdown/
+    """
+
+    def extendMarkdown(self, md, md_globals):
+        # Built-in extensions
+        FencedCodeExtension().extendMarkdown(md, md_globals)
+        SmartEmphasisExtension().extendMarkdown(md, md_globals)
+        TableExtension().extendMarkdown(md, md_globals)
+
+        # Custom extensions
+        gfm.AutolinkExtension().extendMarkdown(md, md_globals)
+        gfm.AutomailExtension().extendMarkdown(md, md_globals)
+        gfm.HiddenHiliteExtension([
+            ('guess_lang', 'False'),
+            ('css_class', 'highlight')
+        ]).extendMarkdown(md, md_globals)
+        gfm.SemiSaneListExtension().extendMarkdown(md, md_globals)
+        gfm.SpacedLinkExtension().extendMarkdown(md, md_globals)
+        gfm.StrikethroughExtension().extendMarkdown(md, md_globals)
+        gfm.TaskListExtension([
+            ('list_attrs', {'class': 'checkbox'})
+        ]).extendMarkdown(md, md_globals)
+        Nl2BrExtension().extendMarkdown(md, md_globals)
 
 
 # Global Vars
 URLIZE_RE = '(%s)' % '|'.join([
     r'<(?:f|ht)tps?://[^>]*>',
     r'\b(?:f|ht)tps?://[^)<>\s]+[^.,)<>\s]',
     r'\bwww\.[^)<>\s]+[^.,)<>\s]',
     r'[^(<\s]+\.(?:com|net|org)\b',
 ])
 
 
 class UrlizePattern(markdown.inlinepatterns.Pattern):
     """ Return a link Element given an autolink (`http://example/com`). """
     def handleMatch(self, m):
         url = m.group(2)
 
         if url.startswith('<'):
             url = url[1:-1]
 
         text = url
 
         if not url.split('://')[0] in ('http','https','ftp'):
             if '@' in url and not '/' in url:
                 url = 'mailto:' + url
             else:
                 url = 'http://' + url
 
         el = markdown.util.etree.Element("a")
         el.set('href', url)
         el.text = markdown.util.AtomicString(text)
         return el
 
 
 class UrlizeExtension(markdown.Extension):
     """ Urlize Extension for Python-Markdown. """
 
     def extendMarkdown(self, md, md_globals):
         """ Replace autolink with UrlizePattern """
         md.inlinePatterns['autolink'] = UrlizePattern(URLIZE_RE, md)

rhodecode/public/css/legacy_code_styles.less

@@ -1,383 +1,397 b''
 
 /** MODAL **/
 .modal-open {
   overflow:hidden;
 }
 body.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom {
   margin-right:15px;
 }
 .modal {
   position:fixed;
   top:0;
   right:0;
   bottom:0;
   left:0;
   z-index:1040;
   display:none;
   overflow-y:scroll;
 	&.fade .modal-dialog {
  		-webkit-transform:translate(0,-25%);
  		-ms-transform:translate(0,-25%);
  		transform:translate(0,-25%);
  		-webkit-transition:-webkit-transform 0.3s ease-out;
  		-moz-transition:-moz-transform 0.3s ease-out;
  		-o-transition:-o-transform 0.3s ease-out;
  		transition:transform 0.3s ease-out;
 	}
 	&.in .modal-dialog {
 		-webkit-transform:translate(0,0);
 		-ms-transform:translate(0,0);
 		transform:translate(0,0);
 	}
 }
 .modal-dialog {
   z-index:1050;
   width:auto;
   padding:10px;
   margin-right:auto;
   margin-left:auto;
 }
 .modal-content {
   position:relative;
   background-color:#ffffff;
   border: @border-thickness solid rgba(0,0,0,0.2);
   .border-radius(@border-radius);
   outline:none;
   -webkit-box-shadow:0 3px 9px rgba(0,0,0,0.5);
   box-shadow:0 3px 9px rgba(0,0,0,0.5);
   background-clip:padding-box;
 }
 .modal-backdrop {
   position:fixed;
   top:0;
   right:0;
   bottom:0;
   left:0;
   z-index:1030;
   background-color:#000000;
 
 	&.modal-backdrop.fade {
 		opacity:0;
 		filter:alpha(opacity=0);
 	}
 	&.in {
 		opacity:0.5;
 		filter:alpha(opacity=50);
 	}
 }
 .modal-header {
   min-height:16.428571429px;
   padding:15px;
   border-bottom: @border-thickness solid @grey6;
   .close {
     margin-top:-2px;
   }
 }
 .modal-title {
   margin:0;
   line-height:1.428571429;
 }
 .modal-body {
   position:relative;
   padding:20px;
 }
 .modal-footer {
   padding:19px 20px 20px;
   margin-top:15px;
   text-align:right;
   border-top:1px solid #e5e5e5;
   .btn + .btn {
     margin-bottom:0;
     margin-left:5px;
   }
   .btn-group .btn + .btn {
     margin-left:-1px;
   }
   .btn-block + .btn-block {
     margin-left:0;
   }
 	&:before {
 		display:table;
 		content:" ";
 	}
 	&:after {
 		display:table;
 		content:" ";
 		clear:both;
 	}
 }
 
 /** MARKDOWN styling **/
 div.markdown-block {
     clear: both;
     overflow: hidden;
     margin: 0;
     padding: 3px 15px 3px;
 }
 
 div.markdown-block h1,
 div.markdown-block h2,
 div.markdown-block h3,
 div.markdown-block h4,
 div.markdown-block h5,
 div.markdown-block h6 {
     border-bottom: none !important;
     padding: 0 !important;
     overflow: visible !important;
 }
 
 div.markdown-block h1,
 div.markdown-block h2 {
     border-bottom: 1px #e6e5e5 solid !important;
 }
 
 div.markdown-block h1 {
     font-size: 32px;
     margin: 15px 0 15px 0 !important;
     padding-bottom: 5px !important;
 }
 
 div.markdown-block h2 {
     font-size: 24px !important;
     margin: 34px 0 10px 0 !important;
     padding-top: 15px !important;
     padding-bottom: 8px !important;
 }
 
 div.markdown-block h3 {
     font-size: 18px !important;
     margin: 30px 0 8px 0 !important;
     padding-bottom: 2px !important;
 }
 
 div.markdown-block h4 {
     font-size: 13px !important;
     margin: 18px 0 3px 0 !important;
 }
 
 div.markdown-block h5 {
     font-size: 12px !important;
     margin: 15px 0 3px 0 !important;
 }
 
 div.markdown-block h6 {
     font-size: 12px;
     color: #777777;
     margin: 15px 0 3px 0 !important;
 }
 
 div.markdown-block hr {
     border: 0;
     color: #e6e5e5;
     background-color: #e6e5e5;
     height: 3px;
     margin-bottom: 13px;
 }
 
 div.markdown-block ol,
 div.markdown-block ul,
 div.markdown-block p,
 div.markdown-block blockquote,
 div.markdown-block dl,
 div.markdown-block li,
 div.markdown-block table {
     margin: 3px 0px 13px 0px !important;
     color: #424242 !important;
     font-size: 13px !important;
     font-family: @text-regular;
     font-weight: normal  !important;
     overflow: visible !important;
     line-height: 140% !important;
 }
 
 div.markdown-block pre {
   margin: 3px 0px 13px 0px !important;
   padding: .5em;
   color: #424242 !important;
   font-size: 13px !important;
   overflow: visible !important;
   line-height: 140% !important;
   background-color: @grey7;
 }
 
 div.markdown-block img {
   border-style: none;
   background-color: #fff;
   padding-right: 20px;
 }
 
 
 div.markdown-block strong {
   font-weight: 600;
   margin: 0;
 }
 
+div.markdown-block ul.checkbox,
+div.markdown-block ol.checkbox {
+    padding-left: 20px !important;
+    margin-top: 0px !important;
+    margin-bottom: 18px !important;
+}
+
 div.markdown-block ul,
 div.markdown-block ol {
     padding-left: 30px !important;
     margin-top: 0px !important;
     margin-bottom: 18px !important;
 }
 
+div.markdown-block ul.checkbox li,
+div.markdown-block ol.checkbox li {
+    list-style: none !important;
+    margin: 6px !important;
+    padding: 0 !important;
+}
+
 div.markdown-block ul li,
 div.markdown-block ol li {
     list-style: disc !important;
     margin: 6px !important;
     padding: 0 !important;
 }
 
 div.markdown-block ol li {
     list-style: decimal !important;
 }
 
 /*
 div.markdown-block a,
 div.markdown-block a:visited {
     color: #4183C4 !important;
     background-color: inherit;
     text-decoration: none;
 }
 */
 
 div.markdown-block #message {
     .border-radius(@border-radius);
     border: @border-thickness solid @grey5;
     display: block;
     width: 100%;
     height: 60px;
     margin: 6px 0px;
 }
 
 div.markdown-block button,
 div.markdown-block #ws {
     font-size: @basefontsize;
     padding: 4px 6px;
     .border-radius(@border-radius);
     border: @border-thickness solid @grey5;
     background-color: @grey6;
 }
 
 div.markdown-block code,
 div.markdown-block pre,
 div.markdown-block #ws,
 div.markdown-block #message {
     font-family: @text-monospace;
     font-size: 11px;
     .border-radius(@border-radius);
     background-color: white;
     color: @grey3;
 }
 
 
 div.markdown-block code {
     border: @border-thickness solid @grey6;
     margin: 0 2px;
     padding: 0 5px;
 }
 
 div.markdown-block pre {
     border: @border-thickness solid @grey5;
     overflow: auto;
     padding: .5em;
     background-color: @grey7;
 }
 
 div.markdown-block pre > code {
     border: 0;
     margin: 0;
     padding: 0;
 }
 
 /** RST STYLE **/
 div.rst-block {
     clear: both;
     overflow: hidden;
     margin: 0;
     padding: 3px 15px 3px;
 }
 
 div.rst-block h2 {
     font-weight: normal;
 }
 
 div.rst-block  h1,
 div.rst-block  h2,
 div.rst-block  h3,
 div.rst-block  h4,
 div.rst-block  h5,
 div.rst-block  h6 {
     border-bottom: 0 !important;
     margin: 0 !important;
     padding: 0 !important;
     line-height: 1.5em !important;
 }
 
 
 div.rst-block  h1:first-child {
     padding-top: .25em !important;
 }
 
 div.rst-block  h2,
 div.rst-block  h3 {
     margin: 1em 0 !important;
 }
 
 div.rst-block  h1,
 div.rst-block  h2 {
     border-bottom: 1px #e6e5e5 solid !important;
 }
 
 div.rst-block  h2 {
     margin-top: 1.5em !important;
     padding-top: .5em !important;
 }
 
 div.rst-block  p {
     color: black !important;
     margin: 1em 0 !important;
     line-height: 1.5em !important;
 }
 
 div.rst-block  ul {
     list-style: disc !important;
     margin: 1em 0 1em 2em !important;
     clear: both;
 }
 
 div.rst-block  ol {
     list-style: decimal;
     margin: 1em 0 1em 2em !important;
 }
 
 div.rst-block pre,
 div.rst-block code {
     font: 12px "Bitstream Vera Sans Mono","Courier",monospace;
 }
 
 div.rst-block code {
     font-size: 12px !important;
     background-color: ghostWhite !important;
     color: #444 !important;
     padding: 0 .2em !important;
     border: 1px solid #dedede !important;
 }
 
 div.rst-block pre code {
     padding: 0 !important;
     font-size: 12px !important;
     background-color: #eee !important;
     border: none !important;
 }
 
 div.rst-block pre {
     margin: 1em 0;
     padding: @padding;
     border: 1px solid @grey6;
     .border-radius(@border-radius);
     overflow: auto;
     font-size: 12px;
     color: #444;
     background-color: @grey7;
 }