Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

improve hr styles #1685

Merged
merged 6 commits into from
Jan 15, 2022
Merged

improve hr styles #1685

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b8e579f
add hr styles
tlylt Nov 1, 2021
0fa5e8a
separate into individual example blocks
tlylt Nov 2, 2021
98ef9f5
Update attribute to classes for consistency
tlylt Jan 13, 2022
21e59f8
Merge branch 'master' into update-hr
tlylt Jan 13, 2022
1e2d659
Update test file due to MarkBind version update
tlylt Jan 13, 2022
ffdde0f
Merge branch 'master' into update-hr
tlylt Jan 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 51 additions & 0 deletions docs/userGuide/syntax/horizontalrules.mbdf
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,57 @@ ______________
</variable>
</include>

### Different Types Of Horizontal Rules

Add additional attributes and classes to modify the style, thickness, and color of a horizontal line.

Available style attributes:
- dotted
- dashed
- double

Available size attributes:
- thick
- thick-1
- thick-2
- thick-3

Available color classes (use any of the available BootStrap border color classes):
- border-info
- border-primary
- etc



<include src="codeAndOutput.md" boilerplate >
<variable name="highlightStyle">markdown</variable>
<variable name="code">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we split this into the above sections? 10 lines at once might be a bit much to keep track of

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure, I have split them into individual code blocks under each description (pls see the deployment preview here)


--- {dotted}

--- {dashed}

--- {double}

--- {thick}

--- {thick-1}

--- {thick-2}

--- {thick-3}

--- {.border-danger}

--- {dashed thick-3}

--- {double .border-secondary}

--- {dotted thick-1 .border-primary}

</variable>
</include>

<span id="short" class="d-none">

```markdown
Expand Down
8 changes: 8 additions & 0 deletions packages/cli/test/functional/test_site/expected/siteData.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -257,6 +257,14 @@
"center-text": "Center Text"
},
"headingKeywords": {}
},
{
"src": "testHr.md",
"title": "create different types of horizontal rules",
"headings": {
"different-types-of-horizontal-rules": "Different types of horizontal rules"
},
"headingKeywords": {}
}
]
}
257 changes: 257 additions & 0 deletions packages/cli/test/functional/test_site/expected/testHr.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,257 @@
<!DOCTYPE html>
<html>

<head>

<meta name="default-head-top">
<script src="/test_site/headFiles/customScriptTop.js"></script>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="generator" content="MarkBind 3.0.6">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>create different types of horizontal rules</title>
<link rel="stylesheet" href="markbind/css/bootstrap.min.css">
<link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
<link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
<link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
<link rel="stylesheet" href="markbind/css/octicons.css">
<link rel="stylesheet" href="markbind/material-icons/material-icons.css">
<link rel="stylesheet" href="markbind/css/codeblock-dark.min.css">
<link rel="stylesheet" href="markbind/css/markbind.min.css">
<script src="markbind/js/polyfill.min.js"></script>
<script src="markbind/js/vue.min.js"></script>
<script src="markbind/js/markbind.min.js"></script>
<script src="testHr.page-vue-render.js"></script>
<script src="markbind/js/jquery.min.js"></script>
<link rel="stylesheet" href="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginStylesheet.css">
<link rel="stylesheet" href="/test_site/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">

<meta name="default-head-bottom">
<link rel="stylesheet" href="/test_site/stylesheets/styles.css">
<script src="/test_site/headFiles/customScriptBottom.js"></script>
<link rel="icon" href="/test_site/favicon.png">
</head>
<script>
const baseUrl = '/test_site'
</script>

<body>
<div id="app">

<div>
<header>
<navbar type="dark" default-highlight-on="sibling-or-child">
<template #brand><a href="/" title="Home" class="navbar-brand">Markbind Test Site</a></template>
<li><a class="nav-link" href="/test_site/bugs/index.html">Open Bugs</a></li>
</navbar>
<div class="bg-info display-4 text-center text-white">
<br>
Test Jumbotron<br>
<br>
</div>
</header>
<p><strong>Relative Link Test</strong> This is a relative Intra-Site link in a layout (see <a href="/test_site/index.html#heading-with-hidden-keyword">link</a>)</p>
</div>
<div id="flex-body">
<overlay-source id="site-nav" class="fixed-header-padding" tag-name="nav" to="site-nav">
<div class="site-nav-top">
<div class="font-weight-bold mb-2" style="font-size: 1.25rem;">
<div>
<h2 id="default-layout"><span id="default-layout" class="anchor"></span>Default Layout<a class="fa fa-anchor" href="#default-layout" onclick="event.stopPropagation()"></a></h2>
</div>
</div>
</div>
<div class="nav-component slim-scroll">
<div>
<site-nav>
<overlay-source class="site-nav-list site-nav-list-root" tag-name="ul" to="mb-site-nav">
<li>
<div class="site-nav-default-list-item site-nav-list-item-0" onclick="handleSiteNavClick(this)"><a href="/test_site/index.html">Home 🏠</a></div>
</li>
<li>
<div class="site-nav-default-list-item site-nav-list-item-0" onclick="handleSiteNavClick(this)"><a href="/test_site/bugs/index.html">Open Bugs 🐛</a></div>
</li>
<li class="site-nav-custom-list-item site-nav-list-item-0">
<h3 id="testing-site-nav"><span id="testing-site-nav" class="anchor"></span>Testing Site-Nav<a class="fa fa-anchor" href="#testing-site-nav" onclick="event.stopPropagation()"></a></h3>
</li>
<li>
<div class="site-nav-default-list-item site-nav-list-item-0" onclick="handleSiteNavClick(this)"><strong>Dropdown </strong> <span aria-hidden="true" class="glyphicon glyphicon-search"></span> title ✏️
<!-- Nested list items will be placed inside a Dropdown menu -->

<i class="site-nav-dropdown-btn-icon site-nav-rotate-icon" onclick="handleSiteNavClick(this.parentNode, false); event.stopPropagation();">
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</i>
</div>
<ul class="site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list">
<li>
<div class="site-nav-default-list-item site-nav-list-item-1" onclick="handleSiteNavClick(this)"><a href="https://www.google.com/">Dropdown link one</a></div>
</li>
<li>
<div class="site-nav-default-list-item site-nav-list-item-1" onclick="handleSiteNavClick(this)"><a href="https://www.google.com/">Html within site-nav <span style="color: red;">should</span> be displayed properly</a></div>
</li>
<li>
<div class="site-nav-default-list-item site-nav-list-item-1" onclick="handleSiteNavClick(this)">Nested Dropdown title 📐

<i class="site-nav-dropdown-btn-icon" onclick="handleSiteNavClick(this.parentNode, false); event.stopPropagation();">
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</i>
</div>
<ul class="site-nav-dropdown-container site-nav-list">
<li>
<div class="site-nav-default-list-item site-nav-list-item-2" onclick="handleSiteNavClick(this)"><a href="https://www.google.com/"><strong>Nested</strong> Dropdown link one</a></div>
</li>
<li>
<div class="site-nav-default-list-item site-nav-list-item-2" onclick="handleSiteNavClick(this)"><a href="https://www.google.com/"><strong>Nested</strong> Dropdown link two</a></div>
</li>
</ul>
</li>
<li>
<div class="site-nav-default-list-item site-nav-list-item-1" onclick="handleSiteNavClick(this)"><a href="https://www.google.com/">Dropdown link two</a></div>
</li>
</ul>
</li>
<li>
<div class="site-nav-default-list-item site-nav-list-item-0" onclick="handleSiteNavClick(this)"><a href="https://www.google.com/"><mark>Third Link</mark> 📋</a></div>
</li>
<li>
<div class="site-nav-default-list-item site-nav-list-item-0" onclick="handleSiteNavClick(this)">Filler text <a href="https://www.youtube.com/"><span aria-hidden="true" class="glyphicon glyphicon-facetime-video"></span> Youtube 📺</a> filler text
<!-- Using a link as a Dropdown title will not render a Dropdown menu -->

<i class="site-nav-dropdown-btn-icon" onclick="handleSiteNavClick(this.parentNode, false); event.stopPropagation();">
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</i>
</div>
<ul class="site-nav-dropdown-container site-nav-list">
<li>
<div class="site-nav-default-list-item site-nav-list-item-1" onclick="handleSiteNavClick(this)"><a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">The answer to everything in the universe</a></div>
</li>
<li>
<div class="site-nav-default-list-item site-nav-list-item-1" onclick="handleSiteNavClick(this)"><mark>Dropdown title</mark> <span aria-hidden="true" class="glyphicon glyphicon-comment"></span> ✏️
<!-- Dropdown menus in are still supported inside, as long as the title is not a link -->

<i class="site-nav-dropdown-btn-icon site-nav-rotate-icon" onclick="handleSiteNavClick(this.parentNode, false); event.stopPropagation();">
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</i>
</div>
<ul class="site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list">
<li>
<div class="site-nav-default-list-item site-nav-list-item-2" onclick="handleSiteNavClick(this)"><a href="https://www.google.com/"><strong>Nested</strong> Dropdown link one</a></div>
</li>
</ul>
</li>
</ul>
</li>
<li>
<div class="site-nav-default-list-item site-nav-list-item-0" onclick="handleSiteNavClick(this)">Really Long Dropdown Title Really Long Dropdown Title Really Long Dropdown Title Really Long Dropdown

<i class="site-nav-dropdown-btn-icon" onclick="handleSiteNavClick(this.parentNode, false); event.stopPropagation();">
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</i>
</div>
<ul class="site-nav-dropdown-container site-nav-list">
<li class="site-nav-custom-list-item site-nav-list-item-1">Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text</li>
<li>
<div class="site-nav-default-list-item site-nav-list-item-1" onclick="handleSiteNavClick(this)">Nested Dropdown Title

<i class="site-nav-dropdown-btn-icon" onclick="handleSiteNavClick(this.parentNode, false); event.stopPropagation();">
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</i>
</div>
<ul class="site-nav-dropdown-container site-nav-list">
<li class="site-nav-custom-list-item site-nav-list-item-2">Hello Doge Hello Doge 🐶</li>
<li>
<div class="site-nav-default-list-item site-nav-list-item-2" onclick="handleSiteNavClick(this)"><a href="/test_site/index.html"><strong>NESTED LINK</strong> Home 🏠</a></div>
</li>
<li class="site-nav-custom-list-item site-nav-list-item-2">Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit</li>
</ul>
</li>
</ul>
</li>
<li>
<div class="site-nav-default-list-item site-nav-list-item-0" onclick="handleSiteNavClick(this)">Test line break in navigation layout

<i class="site-nav-dropdown-btn-icon" onclick="handleSiteNavClick(this.parentNode, false); event.stopPropagation();">
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</i>
</div>
<ul class="site-nav-dropdown-container site-nav-list">
<li class="site-nav-custom-list-item site-nav-list-item-1">Nested line break text ✂️</li>
<li>
<div class="site-nav-default-list-item site-nav-list-item-1" onclick="handleSiteNavClick(this)"><a href="/test_site/index.html">Nested line break href</a>

<i class="site-nav-dropdown-btn-icon" onclick="handleSiteNavClick(this.parentNode, false); event.stopPropagation();">
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</i>
</div>
<ul class="site-nav-dropdown-container site-nav-list">
<li class="site-nav-custom-list-item site-nav-list-item-2">Nested Nested line break text ✂️</li>
</ul>
</li>
<li>
<div class="site-nav-default-list-item site-nav-list-item-1" onclick="handleSiteNavClick(this)">Nested line break dropdown menu

<i class="site-nav-dropdown-btn-icon" onclick="handleSiteNavClick(this.parentNode, false); event.stopPropagation();">
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</i>
</div>
<ul class="site-nav-dropdown-container site-nav-list">
<li class="site-nav-custom-list-item site-nav-list-item-2">Line break item 2 📘</li>
</ul>
</li>
</ul>
</li>
</overlay-source>
</site-nav>
</div>
</div>
</overlay-source>
<div id="content-wrapper" class="fixed-header-padding">
<h1 id="different-types-of-horizontal-rules"><span id="different-types-of-horizontal-rules" class="anchor"></span>Different types of horizontal rules<a class="fa fa-anchor" href="#different-types-of-horizontal-rules" onclick="event.stopPropagation()"></a></h1>
<hr>
<hr dotted>
<hr dashed>
<hr double>
<hr thick>
<hr thick-1>
<hr thick-2>
<hr thick-3>
<hr class="border-danger">
<hr dashed thick-3>
<hr double class="border-secondary">
<hr dotted thick-1 class="border-primary">
<i class="fa fa-arrow-circle-up fa-lg d-print-none" id="scroll-top-button" onclick="handleScrollTop()" aria-hidden="true"></i>
</div>
<overlay-source id="page-nav" class="fixed-header-padding" tag-name="nav" to="page-nav">
<div class="nav-component slim-scroll">
</div>
</overlay-source>
</div>
<div>
<footer>
<h1 id="heading-in-footer-should-not-be-indexed"><span id="heading-in-footer-should-not-be-indexed" class="anchor"></span>Heading in footer should not be indexed<a class="fa fa-anchor" href="#heading-in-footer-should-not-be-indexed" onclick="event.stopPropagation()"></a></h1>
<div class="text-center">
This is a dynamic height footer that supports markdown <span>😄</span>!
</div>
</footer>
</div>
</div>
</body>
<script src="markbind/js/bootstrap-utility.min.js"></script>
<script>
MarkBind.setupWithSearch()
</script>
<script src="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginScript.js"></script>
<script>alert("Inline plugin script loaded!")</script>

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'TRACKING-ID');
</script>

</html>
Loading