Hii!!
I bumped in to a challenge.code-code - is highlighted or clearly distinguishable within a wall of text.
Do i have to use a specific markdown syntax to trigger this or i miss some additional seting in the config.toml besides the noClasses = false?
Ty for your answer if there is any on this isue.
bep
April 4, 2023, 1:20pm
2
In Hugo 0.101.0 we added a new hl_inline flag:
Wow ty i try it instantly
1 Like
Sadly i simply cant make it to work:
In case i use the “hl_inline = false” in the config.toml; i get a nice code block on the site.
config.toml
baseURL = "https://personalpage.mywire.org/"
languageCode = "en-us"
title = "WPP"
theme = "mato"
[outputs]
home = [ "HTML", "JSON" ]
[markup]
defaultMarkdownHandler = 'goldmark'
[markup.asciidocExt]
backend = 'html5'
extensions = []
failureLevel = 'fatal'
noHeaderOrFooter = true
preserveTOC = false
safeMode = 'unsafe'
sectionNumbers = false
trace = false
verbose = false
workingFolderCurrent = false
[markup.asciidocExt.attributes]
[markup.goldmark]
[markup.goldmark.extensions]
definitionList = true
footnote = true
linkify = true
linkifyProtocol = 'https'
strikethrough = true
table = true
taskList = true
typographer = true
[markup.goldmark.parser]
autoHeadingID = true
autoHeadingIDType = 'github'
wrapStandAloneImageWithinParagraph = true
[markup.goldmark.parser.attribute]
block = false
title = true
[markup.goldmark.renderer]
hardWraps = true
unsafe = true
xhtml = false
[markup.highlight]
anchorLineNos = true
codeFences = true
guessSyntax = false
hl_Lines = ''
hl_inline = false
lineAnchors = ''
lineNoStart = 1
lineNos = true
lineNumbersInTable = false
noClasses = false
noHl = false
style = 'monokai'
tabWidth = 4
[markup.tableOfContents]
endLevel = 3
ordered = false
startLevel = 2
styles.css
/* Dark background color: RGB(4, 2, 4) = #040204 */
/* Bright background color: RGB(132, 193, 138) = #84C18A */
/* Normal text color: RGB(148, 180, 159) = #94B49F */
/* H1 > H6 color: RGB(206, 206, 206) = #CECECE */
/* Dark grey colour code: RGB(32, 33, 36) = #212120 */
/* Bright grey colour code: RGB(53, 54, 58) = #353A3A */
/* Link dark color: RGB(206, 206, 206) = #CECECE */
/* Link bright color: RGB(255, 255, 255) = #FFFFFF */
:root {
--dark-background-color: #040204;
--bright-background-color: #479e11;/*#84C18A;*/
--H-color: #10a983;/*#CECECE;*/
--default-text-color: #dcddde;/*#94B49F;*/
--link-dark-color: #479e11;/*#CECECE;*/
--link-bright-color: #10a983;/*#FFFFFF;*/
--text-shadow-color: #10a983;/*#FFFFFF;*/
--test: #FF0000;
}
body { /*General format of the html content*/
background: linear-gradient(-23deg, var(--bright-background-color), var(--dark-background-color) 20%);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
color: var(--default-text-color); /*Default text color*/
font-size: 1.5em;
font-family: 'Lato';
min-height: 96vh;
width: 95%;
margin: 0 auto;
}
a:link, a:visited { /*Link "buttons" inactive format*/
color: var(--link-dark-color);
display: inline-block;
}
a:hover, a:active { /*Link "buttons" hover/active format*/
color: var(--link-bright-color);
}
h1 { /*Format of H1*/
display: block;
font-family: 'Audiowide';
font-size: 2rem;
color: var(--H-color);
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: normal;
}
h2 { /*Format of H2*/
color: var(--H-color);
display: block;
font-family: 'Audiowide';
font-size: 1.5em;
margin-top: 0.83em;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
font-weight: normal;
}
h3 { /*Format of H3*/
display: block;
font-family: 'Audiowide';
color: var(--H-color);
font-size: 1.17em;
margin-top: 1em;
margin-bottom: 0em;
margin-left: 0;
margin-right: 0;
font-weight: normal;
}
h4 { /*Format of H4*/
display: block;
font-family: 'Audiowide';
color: var(--H-color);
font-size: 1em;
margin-top: 1.33em;
margin-bottom: 1.33em;
margin-left: 0;
margin-right: 0;
font-weight: normal;
}
h5 { /*Format of H5*/
display: block;
font-family: 'Audiowide';
color: var(--H-color);
font-size: .83em;
margin-top: 1.67em;
margin-bottom: 1.67em;
margin-left: 0;
margin-right: 0;
font-weight: normal;
}
h6 { /*Format of H6*/
display: block;
font-family: 'Audiowide';
color: var(--H-color);
font-size: .67em;
margin-top: 2.33em;
margin-bottom: 2.33em;
margin-left: 0;
margin-right: 0;
font-weight: normal;
}
.sticky-footer { /*The footer postition and its setings*/
position: sticky;
top: 100%;
}
.center-footer-text { /*The text format within the footer*/
text-align: right;
color: var(--dark-background-color);
}
ol, ul { /*Format of the unordered HTML list*/
list-style-type: disc;
margin: 0em;
padding: 1em;
overflow: hidden;
}
li { /*Format the list elements*/
list-style-type: disc;
color: var(-default-text-color);
}
/*---------------------------------Menu-------------------------------------------------*/
.topnav {
overflow: hidden;
background: linear-gradient(-183deg, var(--bright-background-color), var(--dark-background-color) 25%); /*#Navigation menu bacground #35363a*/
}
.topnav a {
float: left;
display: block; /*block*/
color: var(--H-color); /*Menu button text color*/
text-align: center;
padding: 10px 16px;
text-decoration: none;
font-family: 'Audiowide';
font-size: 19px;
background-color: inherit;
background: fixed;
overflow: hidden;
border-bottom-style: solid;
border-width: 5px;
border-color: var(--dark-background-color);
}
.active {
background-color: var(--H-color);
color: var(--link-dark-color);
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-family: 'Audiowide';
font-size: 17px;
border: none;
outline: none;
color: var(--H-color);
padding: 10px 16px;
background-color: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background: fixed;
background-color: var(--dark-background-color); /*Dropdown button default background*/
min-width: 160px;
box-shadow: 0px 0px 18px 0px rgb(71, 158, 17, 0.7); /*Dropdown menu shadow*/
z-index: 1;
}
.dropdown-content a {
float: none;
color: var(--default-text-color);
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background: fixed; /*Hover background:background*/
color: var(--H-color);/*Hover button text color*/
text-shadow: 8px 8px 10px var(--text-shadow-color);
border-bottom-style: solid;
border-width: 5px;
border-color: var(--link-dark-color);
}
.dropdown-content a:hover {
background-color: var(--dark-background-color); /*Dropdown menu item hover background */
color: var(--H-color);
}
.dropdown:hover .dropdown-content {
display: block;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
/*---------------------------------Search-------------------------------------------------*/
.my-search-field {
width: 50%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
/*---------------------------------Images-------------------------------------------------*/
img[src$='#center'] {
display: block;
max-width: 90%;
padding: 20px 20px;
box-shadow: green;
margin: 0.7rem auto; /* you can replace the vertical '0.7rem' by
whatever floats your boat, but keep the
horizontal 'auto' for this to work */
/* whatever else styles you fancy here */
}
img[src$='#floatleft'] {
float:left;
margin: 0.7rem; /* this margin is totally up to you */
/* whatever else styles you fancy here */
box-shadow: green;
max-width: 50%;
padding: 20px 20px;
}
img[src$='#floatsmallleft'] {
float:left;
margin: 0.7rem; /* this margin is totally up to you */
/* whatever else styles you fancy here */
box-shadow: green;
max-width: 25%;
padding: 20px 20px;
}
img[src$='#floatright'] {
float:right;
margin: 0.7rem; /* this margin is totally up to you */
/* whatever else styles you fancy here */
box-shadow: green;
max-width: 50%;
padding: 20px 20px;
}
img[src$='#floatsmallright'] {
float:right;
margin: 0.7rem; /* this margin is totally up to you */
/* whatever else styles you fancy here */
box-shadow: blue;
max-width: 25%;
padding: 20px 20px;
}
/*---------------------------------Code block & line format-------------------------------------------------*/
/* Adjusted to give override background and text colour */
.highlight pre, pre, .highlight .hll {
background-color: #49483E;
border: 1px solid #ccc;
padding: 6px 10px;
border-radius: 3px;
color: #FFFFFF;
}
.code-inline {
background-color: #ff0000;
border-radius: 3px;
color: #333;
font-size: 0.9em;
margin: 0;
padding: 0.2em 0.4em;
}
.gist pre {
color: #515151;
}
/* Highlights taken from https://gist.github.com/asaaki/1007420 for Monokai theme */
.c { color: #75715e } /* Comment */
.err { color: #960050; background-color: #1e0010 } /* Error */
.k { color: #66d9ef } /* Keyword */
.l { color: #ae81ff } /* Literal */
.n { color: #f8f8f2 } /* Name */
.o { color: #f92672 } /* Operator */
.p { color: #f8f8f2 } /* Punctuation */
.cm { color: #75715e } /* Comment.Multiline */
.cp { color: #75715e } /* Comment.Preproc */
.c1 { color: #75715e } /* Comment.Single */
.cs { color: #75715e } /* Comment.Special */
.ge { font-style: italic } /* Generic.Emph */
.gs { font-weight: bold } /* Generic.Strong */
.kc { color: #66d9ef } /* Keyword.Constant */
.kd { color: #66d9ef } /* Keyword.Declaration */
.kn { color: #f92672 } /* Keyword.Namespace */
.kp { color: #66d9ef } /* Keyword.Pseudo */
.kr { color: #66d9ef } /* Keyword.Reserved */
.kt { color: #66d9ef } /* Keyword.Type */
.ld { color: #e6db74 } /* Literal.Date */
.m { color: #ae81ff } /* Literal.Number */
.s { color: #e6db74 } /* Literal.String */
.na { color: #a6e22e } /* Name.Attribute */
.nb { color: #f8f8f2 } /* Name.Builtin */
.nc { color: #a6e22e } /* Name.Class */
.no { color: #66d9ef } /* Name.Constant */
.nd { color: #a6e22e } /* Name.Decorator */
.ni { color: #f8f8f2 } /* Name.Entity */
.ne { color: #a6e22e } /* Name.Exception */
.nf { color: #a6e22e } /* Name.Function */
.nl { color: #f8f8f2 } /* Name.Label */
.nn { color: #f8f8f2 } /* Name.Namespace */
.nx { color: #a6e22e } /* Name.Other */
.py { color: #f8f8f2 } /* Name.Property */
.nt { color: #f92672 } /* Name.Tag */
.nv { color: #f8f8f2 } /* Name.Variable */
.ow { color: #f92672 } /* Operator.Word */
.w { color: #f8f8f2 } /* Text.Whitespace */
.mf { color: #ae81ff } /* Literal.Number.Float */
.mh { color: #ae81ff } /* Literal.Number.Hex */
.mi { color: #ae81ff } /* Literal.Number.Integer */
.mo { color: #ae81ff } /* Literal.Number.Oct */
.sb { color: #e6db74 } /* Literal.String.Backtick */
.sc { color: #e6db74 } /* Literal.String.Char */
.sd { color: #e6db74 } /* Literal.String.Doc */
.s2 { color: #e6db74 } /* Literal.String.Double */
.se { color: #ae81ff } /* Literal.String.Escape */
.sh { color: #e6db74 } /* Literal.String.Heredoc */
.si { color: #e6db74 } /* Literal.String.Interpol */
.sx { color: #e6db74 } /* Literal.String.Other */
.sr { color: #e6db74 } /* Literal.String.Regex */
.s1 { color: #e6db74 } /* Literal.String.Single */
.ss { color: #e6db74 } /* Literal.String.Symbol */
.bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
.vc { color: #f8f8f2 } /* Name.Variable.Class */
.vg { color: #f8f8f2 } /* Name.Variable.Global */
.vi { color: #f8f8f2 } /* Name.Variable.Instance */
.il { color: #ae81ff } /* Literal.Number.Integer.Long */
1
markdown
Here is some `inline code` in a paragraph.
rendered
<p>Here is some <code>inline code</code> in a paragraph.</p>
Target with CSS child selector:
p > code {
background: blue;
color: white;
}
1 Like
If you want the inline code to be syntax-highlighted…
markdown
Here is some {{< highlight python "hl_inline=true" >}}syntax highlighted code{{< /highlight >}} in a paragraph.
1 Like
Tank you wery mutch!
Sadly at the end its not working as intended.
the < code > is not rendered unless each get its sepperate paragraph . This render markdown list and sub lists impossible to use. highlighted and even that not reliably
Im not realy sure if its possible tryed many workarounds but didnt even found why HUGO added paragraps to one column and none to the others even if the format of the .md is consistant.
Just add more selectors to your CSS.
I must dig deeper in to CSS knowledge i think.
p, li, ul, ol > code {
background-color: #49483E;
color: red;
is applied site wide on to all text not only < code >
Sory for my lack of knowledge but i will figure it somehow given by your hint. Ty
Of course it is. Comma is kind of „or“ in CSS. Do you apply your style to anything that’s a p or an li etc. something likep > code, li > code instead might help
YES this was the ultimate magic!
p > code, li > code, ol > code, ul > code {
}
and for the block code:
pre {
}
TY for the help, i realy learned more than tought
Which in modern browsers could be written as is:(p, li, ol, ul) > code (only syntactic sugar). But note that ul>ode and ol>code do not make sense : The only direct children of ol and ul can be li elements (<ul>: The Unordered List element - HTML: HyperText Markup Language | MDN ). So, if you see code as a direct child of ol or ul, your HTML is borken. Fix it. And read up about CSS and HTML.
1 Like
system
April 7, 2023, 9:30am
16
This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.
i have the block code or the in-lin code. I keep experimenting until then i post my toml and css.
