I want to pass CSS ::after content as a specific word from its class element.
If class names are "language-css", "language-html", etc, in this case, I want to pass the content as the word after the "-".
code::before {
content: attr(class);
}
<code class="language-css"> some code here </code>
<code class="language-html"> some code here </code>
<code class="language-javascript"> some code here </code>
I know this returns the whole text from the CSS class, does CSS support any split function as JavaScript does?
In this particular case, you can hack is with some negative text-indent if the prefix is always the same. The code element is using a monospace font so it's easy using ch unit
code::before {
content: attr(class);
display:inline-block;
text-indent:-9ch; /* adjust this based on your real case */
clip-path:inset(0); /* hide the overflow */
}
<code class="language-css"> some code here </code>
<code class="language-html"> some code here </code>
<code class="language-javascript"> some code here </code>
Related
I am trying to add a minimal code syntax highlighting rule to a web page by only changing the color of comments - lines starting with "#" symbol within the <pre><code> tags.
To my surprise I could not find information about this by searching on StackOverflow. However projects such as ft-syntax-highlight make me assume this to be possible.
Is it possible to adjust the color of lines starting with "#" in the following code block using only css?:
<pre><code>
# function to do something
do_something_here(x1, x2);
</code></pre>
And if so - how?
Probably not what you're looking for but a minimal workaround would be using CSS's content and :before
View in jsfiddle
[comment]:before {
content: "# " attr(comment);
color: red;
white-space: pre-wrap;
width: 45vw;
display: inline-block;
}
<pre>
<code comment="function to do something here line function to do something here line function to do something here line">
do_something_here(x1, x2);
</code>
<code comment="you can use `missing()` to test whether or not the argument y was supplied">
fooBar <- function(x,y){
if(missing(y)) {
x
} else {
x + y
}
}
</code>
</pre>
Note: usedata-comment instead of comment for better html semantics
My goal is to be able to display something like this:
I want to background highlight a piece of code inside a code block that already has syntax highlighting. I want to do this on a markdown file I have on Github that is hosted on Github Pages (can use kramdown markdown, html, css).
I am aware that you can have syntax highlighting inside a code block doing something like this:
```java
int foo (void) {
int i;
}
```
I am also aware that I can background highlight text inside a code block by doing something like this:
<pre><code>int foo (void) {
<span style="background-color:yellow">int i;</span>
}
</code></pre>
But how do I combine these two things?
You can use Google's code-prettify to color the code. It will colorize all code with the class prettyprint. Then you can use a <span> tag to set the background color.
pre {
background-color: #eee;
border-radius: 5px;
}
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify#master/loader/run_prettify.js"></script>
<pre>
<code class="prettyprint">
int foo (void) {
<span style="background-color:yellow">int i;</span>
}
// Yay code and it has colors
</code>
</pre>
I am getting started with learning CSS.
While looking through the tutorial on w3schools.
I realized some of the example start with
.awesome-text-box{}
Is there a different between
.awesome-text-box {} and awesome-text-box{}
without the dot?
What does the dot notation means here
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p referes to ?
A dot in css is for what is called a class.
They can be called almost anything, for example in your CSS you would create a class and add style for it (in this case, I'm making the background black);
.my-first-class {
background-color: #000;
...
}
and to apply this class to an HTML element, you would do the following
<body class="my-first-class">
...
</body>
this would mean the body of the page would become black.
Now, you can create classes for CSS style or you can reference HTML elements directly, for example (CSS again);
body {
background-color: #000;
}
would directly reference the <body> element on the page and do the same again.
The main difference between the two is that CSS classes are reusable. By comparison, referencing the HTML tag directly will affect all tags on the page (that are the same), for example (CSS again);
body {
background-color: #000;
}
.my-first-class {
background-color: #FFF;
}
and now for some HTML;
<body>
<p class="my-first-class">This is the first line</p>
<p class="my-first-class">This is the second line</p>
</body>
This would produce a black page, with 2 white boxes with text inside them (try it out!)
Now for your last part of the question about p.one {...} CSS.
This is a reference to a <p> tag that has class="one" added to it, <p class="one">...</p>
That CSS will only work on a <p> tag with the one class added (as above).
Extra for experts...
There is also one more selector type and it's called an ID (and I personally do not use these when doing CSS styling but some people like too and I don't know why...)
Much like a class, you can have an id on an HTML element; <p id="my-first-id"></p>
and to add CSS style to this, you would put (in the CSS);
#my-first-id {
...
}
and that would style all elements with that id added.
Hopefully that helped answer all the parts, ask again if you need an even better explanation :)
The dot denotes that the selector is a class. So it will select elements in your page as such:
.awesome-text-box {
}
<div class="awesome-text-box"></div>
Whereas without the dot denotes an element name. Such as:
div {
}
<div></div>
In the other example you gave, the dot notation is using chaining this is where you can select an element with numerous conditions. In your example:
p.one {
}
// Will find
<p class="one"></p>
// However it will not find
<div class="one"></div>
Whilst I am here I can give you a list of other common selectors too:
#awesome-text-box => <div id="awesome-text-box"></div> => ID
.btn.btn-style-1 => <span class="btn btn-style-1"></span> => Chaining classes
p > span => <p><span></span></p> => Child
p span => <p><a><span></span></a><span></span> => Descendant (anything below)
p + span => <p></p><span></span> => Sibling
A '.' refers to a class, while a '#' refers to a id.
When neither a '.' or a '#' are used, the CSS will apply the style to an HTML object.
So for p .one and p .two, the CSS will be applied to the '.one' and '.two' classes that exists within the 'p' object.
For a more detailed example;
<p class = "one">This text will have the CSS of "p .one"</p>
<p class = "two">This text will have the CSS of "p .two"</p>
. means a class. You can call that CSS class with HTML
example
<span class="awesome-text-box"> ABCD </span>
and P means <p> tag in HTML you can call
<p class="one"> ABCD </p>
Ref -
http://www.w3schools.com/css/css_selectors.asp
The dot notation is for class and without dot that would not work. The selector name like div, p don't need dot notation. And use hash (#) for the selector with id.
Ex-
<div id="foo">foo bar</div>
<div class="bar">foo bar</div>
#foo{} /* selects foo with id foo */
.bar{} /* selects foo with class bar */
div{} /* selects the div */
Here . is class selector. It means apply style to all elements which has class awesome-text-box ie,
<div class="awesome-text-box"></div>
while without dot it is tag name like you mention in second example p Here p is tag:
<p>Some text</p>
Similarly p.one apply the style to all p tags which has class one. ie,
<p class="one">Some text</p>
If I set the following string into a div how can I get the newline working at HTML?
{
"s":"Phrase1.\n\nPhrase2"
}
Thanks.
Wrap preformatted text in <pre> tags:
<pre>{ "s":"Phrase1.\n\nPhrase2" }</pre>
Shows up as:
{ "s":"Phrase1.
Phrase2" }
Edit: Another option would be to set the div's style or class to behave the same as a pre tag:
<div style="whitespace:pre"/>
foo.innerHTML = myObj.s.replace(/\n/g,"<br>");
{"s", "phrase1.<br /><br />"phrase2"}
If I have some Markdown like
## My Title
A paragraph of content here.
code_line(1);
// a code comment
class MoreCode { }
and more text to follow...
How can I set a class on the <code> block that's generated in the middle there? I want to have it output
<code class=’prettyprint’>
code_line(1);
// a code comment
class More Code { }
</code>
But I can't seem to set it. I do not have control over the Markdown code being run, only over the content.
You can embed HTML in Markdown. Type literally what you want, with no indent.
<code class="prettyprint">
code_line(1);
// a code comment
class More Code { }
</code>
For the specific case of syntax highlighting following the back ticks at the start of a fenced code block with the language works just about everywhere these days.
```js
code_line(1);
// a code comment
class MoreCode { }
```
Though not answering the question exactly. You can use a different render too like Maruku or Kramdown:
## My Title
A paragraph of content here.
~~~
code_line(1);
// a code comment
class MoreCode { }
~~~
{: .prettyprint}
and more text to follow...
Output (tested with haml & kramdown):
<pre class="prettyprint"><code>
code_line(1);
// a code comment
class MoreCode { }
</code></pre>
Kramdown syntax: http://kramdown.rubyforge.org/quickref.html#block-attributes
Markdown has an extension (attr_list.py) which allows you to use Maruku's {: .classname} syntax.
Markdown Extra supports class and id attributes using curly braces. See: https://michelf.ca/projects/php-markdown/extra/#spe-attr