Develop Reference

Showdown render custom tag into custom html block

I am using Showdownjs. Say I want to turn a specific part my markdown text into a custom HTML:
Some text here
# H1
## H2
You can download the latest release tarball directly from [releases]
```[custom-section]
Text within left-aligned div
Text within right-aligned div
```
I want to render my custom-section into this:
<content-section class="someClass">
<div class="someClass">
Text within left-aligned div
</div>
<div class="someoOtherClass">
Text within right-aligned div
</div>
</content-section>
How can I do that?

Right now there isn't a way to directly use div elements or classes in Showdownjs. If you have plain text to fill in the divs then you can just insert the HTML into the custom section. That's the quick and dirty way to do it, but you cannot use other features of Showdownjs inside the div tags as it will convert everything to text. To fix that you can insert the contents of the div by converting them directly to HTML using Showdownjs explicitly inside the string. Here I used template literals:
Some text here
# H1
## H2
You can download the latest release tarball directly from [releases]
<section class="customSection"> // Custom section as raw HTML
<div class="left">
${showdownConverter.makeHtml(` // Using Showdownjs inside the div
# Left-aligned Heading
Text within left-aligned div
- Left-aligned list item
`)}
</div>
<div class="right">
${showdownConverter.makeHtml(`
# Right-aligned Heading
Text within right-aligned div
- Right-aligned list item
`)}
</div>
</section>
CSS:
.right {
float: right;
}
.left {
float: left;
}

How can I select specific text out of markup to apply CSS?

In the example below, how can I apply CSS styling on the text THIS inside of the p tag, without applying the CSS to the span tag?
<p>
<span class='x' id='1'><a href='#'>y</a>.</span>
THIS
</p>

You can target that indirectly - by first targeting the entire p, and then targetting the span and the a inside it - effectively selecting everything inside the p that has a tag.
In the following I am targetting the "TEXT" to make it red, whilst then over-riding that to target the other portions to give them different colours.s I then present a slightly longer version to demonstrate each portion as it is targetted.
p {color: red}
p span { color: black}
p span a { color: blue}
<p><span class='x' id='1'><a href='#'>y</a>.</span>THIS</p>
<p>
<span class='x' id='1'>
<a href='#'>This is a link</a>
This is text within the span</span>
This is another test
</p>

To select the text in <p></p> except the contents of <span></span> you can use the :not() selector:
p :not(span)
Though as the THIS is not wrapped in an element, it cannot be styled by CSS independently.
If it's CSS you want, then I advise wrapping the THIS in another tag with a class. Otherwise, you can use css to format the <p></p> and revert the child elements styles, see unset, inherit, and initial. e.g.:
p {color: red}
p span { color: initial }
p span a { color: initial }
<p><span class='x' id='1'><a href='#'>y</a>.</span>THIS</p>

CSS Style only text within a paragraph tag

I have a page of text and it is formatted similar to this
<div class="container">
<p style="text-align: center;">
<span style="text-decoration: underline;">
<strong>
<img src="//cdn.shopify.com/s/files/1/0652/9219/files/Horizontal.jpg?13817493546805475501" alt="">
</strong>
</span>
</p>
<p style="text-align: center;">
<span style="text-decoration: underline;">
<strong>The Hosting</strong>
</span>
</p>
<p>
The in-laws are arriving, friends are in town, and everyone is heading to your abode for a night filled with holiday cheer. As stress levels tend to rise during these events, expenses do as well. Here are a few tips to nail your hostess game, without breaking the bank and <em>still</em> shopping consciously.
</p>
</div>
I am looking to keep the images which fit the entire content width of the class container the same but only change the text within the paragraph tags to either be a smaller width (so it looks indented on both sides) or have margins but not affect the images at all. I cannot change how the code is outputted so the images will always be wrapped in paragraph tags.
This code is a small sample on the page of content and there are several images and text throughout.
So basically I am looking for a way in css to style only the actual text within the paragraph tags and leave the images unchanged. Any help would be great.
Here is a fiddle example: https://jsfiddle.net/jpautt8v/

If your html is static or if you know which child you want to modify then you could simply use the nth child css selector to apply css like below 3rd in your sample code case. You could play around margins and see what works best for your solution.
p:nth-child(3)
{
margin: 0 50px;
}

Without changing any of the existing markup, you can accomplish what you want using negative margin.
Something like this will work:
img {
width: 120%; max-width: 120%;
margin: 0 -10%;
}
.content > div, .content > p {
margin: 0 10%;
}
You can see it working in this fiddle: https://jsfiddle.net/igor_9000/jpautt8v/1/

apply colour change to only some tags

If I am using a <h3> tag and apply css
h3 {
color:White;
}
changes the colour of all the header 3 text to white colour.
I only want to apply this to certain <h3> tags though among my many.
How can I do this please?

Give them a class:
.white-header {
color: white;
}
And in your html:
<h3 class='white-header'>I m white</h3>
JsFiddle

You can use a common class on them and use css for that.
I only want to apply this to certain tags though among my many.
Then you target parent element and apply css for that like below:
<h3>heading</h3>
<div class="foo">
<h3>some heading</h3>
<p>some paragraph</p>
</div>
h3{
color: red;
}
.foo h3{/*applied for some heading*/
color: white;
}

CSS is the way to go, but since the question is tagged javascript here is a JS solution using querySelector() to style select <h3> tags:
document.querySelector("div.someClass h3").style.color = "#FFF";
Edit: #Kitler just edited out the javascript tag from the question. This answer is for the original question. If the OP leaves it off, then I will quietly delete this. Hold off before downvoting.

Hide specific div without css

If I have a page that inserts an unwanted div on every load, is there any way to hide it without using CSS? I don't have access to that div and it doesn't have an ID or a CLASS.
For example I don't want the browser to display the following div:
<div style="text-align: center; font-size: 14px; text-decoration: none;">Please click <a style="text-decoration: none !important;" target="_blank" href="http://www.website.com"><b>here</b></a></div>
I found a question and an answer for hiding a specific string of text, but it doesn't work with this.

You can try to select content inside the div by using attribute value. Href attribute inside your div is perfect to do this, and then just use jQuery .parent() method to select whole div.
$("a[href='http://www.website.com']").parent().css("display","none")
Here is the working example:
http://jsfiddle.net/waxtue0o/

There are some ways of identifying an element without it having an id or class. If you have jquery you can use more advanced selectors like mgibala said (although I would prefer to do it without scripting).
See http://www.w3schools.com/cssref/css_selectors.asp for information on selectors. Two examples below.
Fiddle: http://jsfiddle.net/o8oyd3e2/
HTML:
<body>
<div style="background-color='red';">
Spam spam spam
</div>
<div>
Some content
</div>
<div class="myContent">
Some content
</div>
<div style="background-color='red';">
Spam spam spam
</div>
</body>
CSS:
body div:first-child {
display:none;
}
body div.myContent + div {
display:none;
}
Or you can host your site somewhere else...

You can do
document.getElementsByTagName("div")[0].style.display = 'none';