Mẫu CSS cho bài viết sử dụng Markdown

HTML

<div id="content" class="main-content">
    Nội dung bài viết
</div>

CSS

/* noi dung chinh - main content */

#content{line-height:1.6}
#content ol,#content ul,#content dl,#content pre,#content address,#content blockquote,#content .table-wrapper{margin-top:.5em}
#content a{overflow:hidden;text-overflow:ellipsis}
#content ul,#content ol{padding-left:1.5em}
#content li .highlight{margin-top:.25rem}
#content ol{list-style-type:none;counter-reset:step-counter}#content ol > li{position:relative}
#content ol > li::before{position:absolute;top:.2em;left:-1.6em;color:#959396;content:counter(step-counter) '. ';counter-increment:step-counter;font-size:12px!important}
@media (min-width: 31.25rem){#content ol > li::before{font-size:14px!important}}
@media (min-width: 31.25rem){#content ol > li::before{top:.11em}}
#content ol > li ol{counter-reset:sub-counter}
#content ol > li ol > li::before{content:counter(sub-counter, lower-alpha);counter-increment:sub-counter}
#content ul{list-style:none}
#content ul > li::before{position:absolute;margin-left:-1.4em;content:"•"}
#content .task-list-item::before{content:""}
#content .task-list-item-checkbox{margin-right:.6em;margin-left:-1.4em}
#content hr + *{margin-top:0}
#content h1:first-of-type{margin-top:.5em}
#content dl{display:grid;grid-template:auto/10em 1fr}
#content dt,#content dd{margin:.25em 0}
#content dt{grid-column:1;font-weight:500;text-align:right}
#content dt::after{content:":"}
#content dd{grid-column:2;margin-bottom:0;margin-left:1em}
#content dd blockquote:first-child,#content dd div:first-child,#content dd dl:first-child,#content dd dt:first-child,#content dd h1:first-child,#content dd h2:first-child,#content dd h3:first-child,#content dd h4:first-child,#content dd h5:first-child,#content dd h6:first-child,#content dd li:first-child,#content dd ol:first-child,#content dd p:first-child,#content dd pre:first-child,#content dd table:first-child,#content dd ul:first-child,#content dd .table-wrapper:first-child{margin-top:0}
#content dd dl:first-child dt:first-child,#content dd dl:first-child dd:nth-child(2),#content ol dl:first-child dt:first-child,#content ol dl:first-child dd:nth-child(2),#content ul dl:first-child dt:first-child,#content ul dl:first-child dd:nth-child(2){margin-top:0}
#content .anchor-heading{position:absolute;right:-1rem;width:1.5rem;height:100%;padding-right:.25rem;padding-left:.25rem;overflow:visible}
@media (min-width: 50rem){#content .anchor-heading{right:auto;left:-1.5rem}}
#content .anchor-heading svg{display:inline-block;width:100%;height:100%;color:#7253ed;visibility:hidden}
#content .anchor-heading:hover svg,#content .anchor-heading:focus svg,#content h1:hover > .anchor-heading svg,#content h2:hover > .anchor-heading svg,#content h3:hover > .anchor-heading svg,#content h4:hover > .anchor-heading svg,#content h5:hover > .anchor-heading svg,#content h6:hover > .anchor-heading svg{visibility:visible}
#content summary{cursor:pointer}
#content h1,#content h2,#content h3,#content h4,#content h5,#content h6,#content #toctitle{position:relative;margin-top:1.5em;margin-bottom:.25em}
#content h1 + table,#content h1 + .table-wrapper,#content h1 + .code-example,#content h1 + .highlighter-rouge,#content h1 + .sectionbody .listingblock,#content h2 + table,#content h2 + .table-wrapper,#content h2 + .code-example,#content h2 + .highlighter-rouge,#content h2 + .sectionbody .listingblock,#content h3 + table,#content h3 + .table-wrapper,#content h3 + .code-example,#content h3 + .highlighter-rouge,#content h3 + .sectionbody .listingblock,#content h4 + table,#content h4 + .table-wrapper,#content h4 + .code-example,#content h4 + .highlighter-rouge,#content h4 + .sectionbody .listingblock,#content h5 + table,#content h5 + .table-wrapper,#content h5 + .code-example,#content h5 + .highlighter-rouge,#content h5 + .sectionbody .listingblock,#content h6 + table,#content h6 + .table-wrapper,#content h6 + .code-example,#content h6 + .highlighter-rouge,#content h6 + .sectionbody .listingblock,#content #toctitle + table,#content #toctitle + .table-wrapper,#content #toctitle + .code-example,#content #toctitle + .highlighter-rouge,#content #toctitle + .sectionbody .listingblock{margin-top:1em}#content h1 + p:not(.label),#content h2 + p:not(.label),#content h3 + p:not(.label),#content h4 + p:not(.label),#content h5 + p:not(.label),#content h6 + p:not(.label),#content #toctitle + p:not(.label){margin-top:0}#content > h1:first-child,#content > h2:first-child,#content > h3:first-child,#content > h4:first-child,#content > h5:first-child,#content > h6:first-child,#content > .sect1:first-child > h2,#content > .sect2:first-child > h3,#content > .sect3:first-child > h4,#content > .sect4:first-child > h5,#content > .sect5:first-child > h6{margin-top:.5rem}

/* dinh dang bang - table */

#content table{display:table;min-width:100%;border-collapse:separate}
#content th,#content td{font-size:12px!important;min-width:120px;padding-top:.5rem;padding-right:.75rem;padding-bottom:.5rem;padding-left:.75rem;background-color:#fff;border-bottom:1px solid rgba(238,235,238,0.5);border-left:1px solid #eeebee}
@media (min-width: 31.25rem){#content th,#content td{font-size:14px!important}}
#content th:first-of-type,#content td:first-of-type{border-left:0}
#content tbody tr:last-of-type th,#content tbody tr:last-of-type td{border-bottom:0}
#content tbody tr:last-of-type td{padding-bottom:.75rem}
#content thead th{border-bottom:1px solid #eeebee}

/* highlight code */

p{font-size:16px;line-height:1.5;margin-bottom:25px}
blockquote{font-style:italic;margin-left:0;padding-left:16px;border-left:4px solid #eee}
pre,code{font-family:monospace,monospace;font-size:1em}
pre{overflow-x:auto;white-space:pre-wrap;word-wrap:break-word}
code{font-family:"SFMono-Regular",menlo,consolas,monospace;font-size:.75em;line-height:1.4;backgroung:#eee}
pre.highlight{border:1px solid #eeebee}.main{max-width:none;margin-left:0}}a.skip-to-main{left:-999px;position:absolute;top:auto;width:1px;height:1px;overflow:hidden;z-index:-999}a.skip-to-main:focus,a.skip-to-main:active{color:#7253ed;background-color:#fff;left:auto;top:auto;width:30%;height:auto;overflow:auto;margin:10px 35%;padding:5px;border-radius:15px;border:4px solid #5e41d0;text-align:center;font-size:1.2em;z-index:999}div.opaque{background-color:#fff}p.highlight,blockquote.highlight{background:rgba(255,235,130,0.2);border-left:4px solid #e7af06;border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,0.12),0 3px 10px rgba(0,0,0,0.08);padding:.8rem}p.highlight > .highlight-title,blockquote.highlight > .highlight-title{color:#e7af06;display:block;font-weight:700;text-transform:uppercase;font-size:.75em;padding-bottom:.125rem}p.highlight-title,blockquote.highlight-title{background:rgba(255,235,130,0.2);border-left:4px solid #e7af06;border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,0.12),0 3px 10px rgba(0,0,0,0.08);padding:.8rem}p.highlight-title > p:first-child,blockquote.highlight-title > p:first-child{margin-top:0;margin-bottom:0;color:#e7af06;display:block;font-weight:700;text-transform:uppercase;font-size:.75em;padding-bottom:.125rem}blockquote.highlight{margin-left:0;margin-right:0}blockquote.highlight > p:first-child{margin-top:0}blockquote.highlight > p:last-child{margin-bottom:0}blockquote.highlight-title{margin-left:0;margin-right:0}blockquote.highlight-title > p:nth-child(2){margin-top:0}blockquote.highlight-title > p:last-child{margin-bottom:0}p.important,blockquote.important{background:rgba(44,132,250,0.2);border-left:4px solid #183385;border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,0.12),0 3px 10px rgba(0,0,0,0.08);padding:.8rem}
div.highlighter-rouge,div.listingblock > div.content{padding:.75rem;margin-top:0;margin-bottom:.75rem;overflow-x:auto;background-color:#f5f6fa;border-radius:4px;box-shadow:none;-webkit-overflow-scrolling:touch}div.highlighter-rouge div.highlight,div.highlighter-rouge pre.highlight,div.highlighter-rouge code,div.listingblock > div.content div.highlight,div.listingblock > div.content pre.highlight,div.listingblock > div.content code{padding:0;margin:0;border:0}figure.highlight{padding:.75rem;margin-top:0;margin-bottom:.75rem;overflow-x:auto;background-color:#f5f6fa;border-radius:4px;box-shadow:none;-webkit-overflow-scrolling:touch}figure.highlight pre,figure.highlight code{padding:0;margin:0;border:0}.highlight .table-wrapper{padding:0;margin:0;border:0;box-shadow:none}.highlight .table-wrapper td,.highlight .table-wrapper pre{font-size:11px!important;min-width:0;padding:0;background-color:#f5f6fa;border:0}@media (min-width: 31.25rem){.highlight .table-wrapper td,.highlight .table-wrapper pre{font-size:12px!important}}.highlight .table-wrapper td.gl{width:1em;padding-right:.75rem}.highlight .table-wrapper pre{margin:0;line-height:2}.code-example,.listingblock > .title{padding:.75rem;margin-bottom:.75rem;overflow:auto;border:1px solid #eeebee;border-radius:4px}.code-example + .highlighter-rouge,.code-example + .sectionbody .listingblock,.code-example + .content,.code-example + figure.highlight,.listingblock > .title + .highlighter-rouge,.listingblock > .title + .sectionbody .listingblock,.listingblock > .title + .content,.listingblock > .title + figure.highlight{position:relative;margin-top:-1rem;border-right:1px solid #eeebee;border-bottom:1px solid #eeebee;border-left:1px solid #eeebee;border-top-left-radius:0;border-top-right-radius:0}code.language-mermaid{padding:0;background-color:inherit;border:0}

QRcode

Mẫu CSS cho bài viết sử dụng Markdown

Chia sẻ