Organizing <pre> Tag Layout - javascript

I am trying to get the pre tag to break on the line breaks like how I have it displayed. Instead its putting the vv section on the first, not breaking in the middle of the comments comment section, etc. Is there some CSS for this that might be helpful?
.testingZone {
margin-left: 20px;
}
.testingZone a {
color: blue;
}
.testingZone a:hover {
color: gold;
}
.testingZone pre {
font-family: monospace;
white-space: normal;
}
<div class="testingZone">
<pre>
<!-- Note: comment comment comment.
Comment Comment/Comment, more comments "comment"-->
<vv:aaa vv:bbb="sss" vv:ccc="SectionA;SectionB;SectionC=SectionD;SectionE=SectionF.SectionG.SectionH;,SectionI=SectionJ;SectionK=SectionL;SectionM=SectionN;SectionO=SectionP.SectionQ.SectionR;SectionS=/;"/>
<vv:aaa vv:bbb="iii" vv:ccc="\SectionT\SectionU\_SectionV,\SectionW\SectionX,\SectionY\_SectionZ"/>
</pre>
</div>

Instead of white-space: normal;, use white-space: pre-line;. This allows runs of white-space to be combined within a line, but doesn't allow lines to be merged. This will merge all the leading spaces on each line into a single space.
.testingZone {
margin-left: 20px;
}
.testingZone pre {
font-family: monospace;
white-space: pre-line;
}
<div class="testingZone">
<pre>
<!-- Note: comment comment comment.
Comment Comment/Comment, more comments "comment"-->
<vv:aaa vv:bbb="sss" vv:ccc="SectionA;SectionB;SectionC=SectionD;SectionE=SectionF.SectionG.SectionH;,SectionI=SectionJ;SectionK=SectionL;SectionM=SectionN;SectionO=SectionP.SectionQ.SectionR;SectionS=/;"/>
<vv:aaa vv:bbb="iii" vv:ccc="\SectionT\SectionU\_SectionV,\SectionW\SectionX,\SectionY\_SectionZ"/>
</pre>
</div>
There's no way to totally ignore all the white-space at the beginning of each line. See MDN for descriptions of all the white-space styles.

You need to remove the white-space rule on the .testingZone pre tag or set it to the default for <pre> tags, which is 'pre'.
So basically: Change
.testingZone pre {
font-family: monospace;
white-space: normal;
}
to
.testingZone pre {
font-family: monospace;
}
or to
.testingZone pre {
font-family: monospace;
white-space: pre;
}

Related

Placeholder text in <span> element is not working correctly specifically in Firefox

I am trying to create a placeholder in span element, and when user focus on the text the placeholder disappear and user are able to type something on it.
If you run the code below in other browser such as Chrome and Edge, the placeholder disappear correctly when you focus on the text, however on Firefox, you can't seems to focus or edit the text. I would like to know what's the difference between Firefox browser and others, and would also prefer if this can be resolve via CSS instead of Javascript.
HTML:
<body contenteditable="true">
<span style="font-size: 16pt; font-family: 'Verdana'; font-weight: bold;" data-runningid="1.1" data-placeholder="Enter new paragraph here..." class="newParagraphPlaceholder" data-mce-style="font-size: 16pt; font-family: 'Verdana'; font-weight: bold;">
</span>
</body>
CSS:
.newParagraphPlaceholder {
display: inline-block;
}
.newParagraphPlaceholder:empty::before {
content: attr(data-placeholder);
color: grey;
}
Kindly refer to the demo here: https://jsfiddle.net/6L8gyfk7/2/.
Take note that there's a body with attribute contenteditable='true' tag wrapping the span tag that I need to preserve.
Because in Mozilla the -moz-user-focus is set to none by default, you can check this by going to console --> computed
You can fix this by
-moz-user-focus: select-after;
Something I don't get from your code though is why you're using so much styling within your ? You get the same result if you do
<span class="newParagraphPlaceholder"data-runningid="1.1" data-placeholder="Enter new paragraph here..."></span>
.newParagraphPlaceholder {
display: inline-block;
font-size: 16pt;
font-weight: bold;
}
Might be just me though, but with a long batch of code you're into a big struggle to adjust certain areas because it isn't properly written down in CSS.
I removed contenteditable from body to span and it woked and if you want to check browser support for css Property you can check here
Codepen Link
.newParagraphPlaceholder {
display: inline-block;
outline: none
}
.newParagraphPlaceholder:empty::before {
content: attr(data-placeholder);
color: grey;
}
<!-- html is the same -->
<body >
<span contenteditable="true" style="font-size: 16pt; font-family: 'Verdana'; font-weight: bold;" data-runningid="1.1" data-placeholder="Enter new paragraph here..." class="newParagraphPlaceholder" data-mce-style="font-size: 16pt; font-family: 'Verdana'; font-weight: bold; color: #000; "></span>
</body>

PrismJS no line breaks

Not sure if anyone has come across this. I'm using PrismJS syntax highlighter to highlight code. Application is written in Reactjs and what I'm trying to do is inside a WYSIWYG editor I'm wrapping user selected text with pre + code when user wants to insert code block. PrismJS seems to tokenize elements correctly as you would expect:
But as you can probably see from the image above, everything is put into a single line. Rather then nice code block:
I'm not sure what's wrong, using css from prismjs site:
code[class*="language-"],
pre[class*="language-"] {
color: black;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]::-moz-selection,
pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
pre[class*="language-"]::selection,
pre[class*="language-"] ::selection,
code[class*="language-"]::selection,
code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}
#media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #999;
}
.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #905;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #690;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
background: hsla(0, 0%, 100%, .5);
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
}
.token.function,
.token.class-name {
color: #dd4a68;
}
.token.regex,
.token.important,
.token.variable {
color: #e90;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
Here is outputted html:
EDIT:
If adding word-wrap: pre-wrap this is the outcome:
I had a similar issue when initializing the element manually. I stumbled upon this discussion, which had a fix that worked for me: https://github.com/PrismJS/prism/issues/1764
HTML - Load script with flag data-manual:
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/prism.min.js" data-manual></script>
JS - Add the following hook:
Prism.hooks.add("before-highlight", function (env) {
env.code = env.element.innerText;
});
Prism.highlightElement(code);
Working example:
https://codepen.io/Ukmasmu/pen/xxZLwxG?editors=1010
Try to update the CSS file with:
white-space: pre-wrap
https://github.com/PrismJS/prism/issues/1237
In case this is helpful for anyone else, I have a textarea that updates a code block as you type, and this worked for me:
<textarea onkeyup="this.onchange();" onchange="document.getElementById('query-highlighted').textContent = this.value; Prism.highlightAll();"></textarea>
<pre><code class="language-sql" id="query-highlighted"></code></pre>
Namely, I used .textContent = instead of .innerText = (the latter didn't preserve the line breaks as expected).
I was aided by Sever van Snugg's answer and the issue he linked.
1. Activate normalize whitespace plugin
I suggest you activate normalize whitespace plugin and set the break-lines property instead of manipulating prism.css file to using white-space: pre-wrap like this:
Prism.plugins.NormalizeWhitespace.setDefaults({
'remove-trailing': true,
'remove-indent': true,
'left-trim': true,
'right-trim': true,
'break-lines': 60, //max number of characters in each line before break
});
I'm using the above approach in my blog, and it works like a charm. You can adjust the break-lines value according to your preferences of course.
2. Insert a line break tag <br> to break a line at will
Now that you set the break-line property after a certain maximum number of characters, you probably want to break some lines at will for cleaner code. To do so you need to insert a <br> tag where you want to have a break line.
NOTE: if you're using an html parser to parse dynamic content with prism
If you're using a parser to parse you dynamically generated html code as a string (from a database for example) and prims is not parsing your <br> tags you'll have to use before-sanity-check prism hook like this:
Prism.hooks.add('before-sanity-check', function (env) {
env.element.innerHTML = env.element.innerHTML.replace(/<br>/g, '\n');
env.code = env.element.textContent;
});
before highlighting, what the above code does is replacing <br> tags with \n since prism can't parse <br> as a line break.
Similar to the answer by Sever van Snugg, I use the following solution where the forEach loop highlights all the code nodes according to the style rules of the Prism CSS stylesheet used (because I have several code tags on a single page). I locate these scripts in the bottom of my HTML body:
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.27.0/prism.min.js" data-manual></script>
<script>
Prism.hooks.add("before-highlight", function (env) {
env.code = env.element.innerText;
});
code = document.getElementsByTagName('code');
Array.from(code).forEach(el => { Prism.highlightElement(el) });
</script>
I tried to mixed Markdown and Prismjs the trick is to replace '\n' with '\r\n' to keep breaklines.
from bs4 import BeautifulSoup
...
code_tag = soup.new_tag('code class="lang-%s"' % lang)
code_tag.string = code.string.replace('\n','\r\n')
code.replaceWith(code_tag)

JS print - CSS text color not showing

I'm making an invoice in HTML & CSS. The goal is that after filling in, the invoice gets printed. But for some reason it doesn't print the CSS color of text. All text is black.
All other CSS styling works, like font-family, font-size, font-weight ...
This is the original in HTML & CSS :
And this is what is printed :
The printing is done with js: window.print();
Does anyone know why CSS color isn't working?
EDIT:
the title is placed in a table with id 'factuur':
<td id="factuurTitel">Stukadoorwerken Vanhees Frank</td>
The title has this CSS:
#factuurTitel {
font-weight: bold;
font-size: 30px;
color: #194197;
text-align: center;
vertical-align: middle;
font-family: 'Carrois Gothic SC', Calibri, sans-serif;
}
I have this #media print :
#media print {
body * {
visibility: hidden;
}
#factuur, #factuur * {
visibility: visible;
}
#page {
margin: 0;
}
}
I've tried adding #factuurTitel { color: #194197; } to the #media print.
Usually JS Print only handles html content alone if you want to give stylings to print, Use separate media query print in your css file:
#media print
{
/* your css goes here */
}
#factuur, #factuur * {
-webkit-print-color-adjust: exact;
color-adjust: exact;
}
This works in webkit browsers and the latest firefox updates, otherwise there's no other known solution.
I had the same problem myself.

Capitalizing the first letter of a label element

I am getting some external html page where all the data is coming in lowercase. with css, i tried to capitalize the first intial of the complete label tag but i am unable to do it, it makes complete uppercase like this:
.fontmodal {
text-transform:capitalize !important;
}
but that did not worked...
<table><fieldset><div><label>DATA</label></div></fieldset></table> - This is the current Structure
Now i am trying to same in jquery, i am not sure what and how to proceed.
Here is my code what i am trying:
$('#Container2').find("table>label").css(textTransform,'capitalize');
See below:
label {
text-transform: lowercase;
}
div::first-letter {
text-transform: uppercase;
}
<table>
<fieldset>
<div>
<label>DATA</label>
</div>
</fieldset>
</table>
If you can't change the HTML and need to apply the capital letter on the first letter, you need to change the default display property of the <label> tag :
:first-letter :
has only an effect on elements with a display value of block,
inline-block, table-cell, list-item or table-caption. In all other
cases, ::first-letter has no effect. (source MDN)
label {
display: inline-block;
text-transform: lowercase;
}
label::first-letter {
text-transform: capitalize;
}
<table>
<fieldset>
<div>
<label>DATA</label>
</div>
</fieldset>
</table>
You simplify it and do something like below.
$(document ).ready(function() {
$("label").addClass("capitalizer"); // Adjust specificity as needed
});
.capitalizer {
font-weight: bold;
font-size: 72px;
display: inline-block;
color: red;
}
.capitalizer::first-letter {
text-transform: capitalize;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<label>data</label>
</div>
Note: I prefer .addClass because .CSS adds inline css to your HTML and that's not advisable.
You can achieve this using the CSSS selector :first-letter.
The subtly I have found is that it doesn't appear to be supported on the <label/> tag (didn't work in my demo code, anyhow)
But we can get round that:
label {
text-transform: lowercase;
}
div:first-child:first-letter {
text-transform: uppercase;
color: red;
}
DEMO: http://jsfiddle.net/30trmm3w/1
I don't get what's wrong a simple CSS rule should do the trick :
#Container2 label {
text-transform: capitalize;
}

Styling JS-Generated Code

I am using a "find and replace" type javascript function, and replacing all the backticks in the HTML with <code> tags, and all the pound signs with </code> tags. For some reason my styles are not working unless I code them in on the JS file with the .css() method.
Ideally, the combo should output the code between backticks and pound signs as blocked <code> content, (the <code> tags are generated from JavaScript) with a soft gray background. However, for some reason the styles just don't show up.
If any one can help, I'd greatly appreciate it.
This is my html file test.html:
<!DOCTYPE html>
<head>
<title>Script Test</title>
<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<link rel="stylesheet" href="styles/code/style.css" type="text/css">
</head>
<body>
<p>This is some code:
`var p = 10; #
`var a = 5; #
`var x; #
`x = a * p; #
`console.log(x); #
All I want is for this to work!
</p>
<script src="codeStyle.js"></script>
</body>
My CSS file (compiled from SASS) style.css:
body {
color: #121212;
font-family: 'Helvetica Neue', serif;
font-weight: 300;
letter-spacing: .25px; }
body div.container {
padding: 10px; }
body div.container code.styled {
font-family: arial, serif;
background-color: #f9f9f9; /* soft gray bg color */
display: block; /* block display style */
margin: 2px 0 2px 2.5%;
padding: 3px;
width: auto;
background-color: #fafafa;
border: 1px solid #f5f5f5; }
/*# sourceMappingURL=style.css.map */
And my js file codeStyle.js:
$('p').each(function() {
var text = $(this).html(); // Grab HTML from each <p>
text = text.replace(/`/gi,"<code class='styled'>"); // Replaces every ` with <code>
text = text.replace(/#/gi,"</code>"); // Replaces every # with </code>
$(this).html(text); // Set <p> html as replaced code
});
To put Partick's answer up: Your CSS is trying to target an element that doesn't exist.
The problem is in this bit of CSS:
body div.container code.styled { }
There is no content that matches this selector, as there is no <div class="container">
To get around this, you can either remove the offending selector from the CSS:
body code.styled {}
or add the requied selector to your HTML:
<div class="container">
<p>Some text <code class="styled">some code</code>.</p>
</div>
Here's a Fiddle of it working.

Categories