How to change font for the CodeMirror editor - javascript

I am trying to change font-family and font-size of my CodeMirror editor. I tried changing it by setting the according CSS attributes but it does not seem to work for me:
.codemirror-textarea {
font-family: Arial, monospace;
font-size: 16px;
}
Do I have to import something in order to achieve this or might I have to edit the libraries CSS file directly? What am I doing wrong?

Try setting the CSS on:
.CodeMirror {
font-family: Arial, monospace;
font-size: 16px;
}
This selects the element that contains all the formatted code.

Just to follow-up on the accepted answer, the version of CodeMirror I'm using (5.55.0 at the time of posting) requires a wildcard:
.CodeMirror * {
/* ^
*/
font-family: Arial, monospace;
font-size: 16px;
}

Or add an extension
const customTheme = EditorView.theme({
'&': {
font:"'JetBrains Mono', monospace",
}
})
const startState = EditorState.create({
doc: page.text,
extensions: [
customTheme,
// ...
]
})

Or, like this if you want to do it from JavaScript:
editor.getWrapperElement().style["font-size"] = size+"px";
editor.refresh();

Related

Is there anyway to apply letter and word spacing to a "font" using css?

I have a custom font with code like this -
#font-face {
font-family: 'classylight';
url : 'some path';
font-weight:normal;
}
I want to set some values exclusively for this font everywhere on the site like letter spacing, word spacing, and other styles. I wanted to reduce unneccessary process, and looked for attribute=style property.
I tried -
body [style="font-family:classylight"] {
letter-spacing:50px;
word-spacing:-20px;
}
It's not working. Can anyone help? I would like to use only css for this. If there's no possibility in css, please refer with javascript, jquery.
PS - I'm not looking for answers which adds styles directly to body part like
p {
font-family: classylight;
letter-spacing:50px;
word-spacing:-20px;
}
Unike text color and size, You can't change letter spacing and word spacing using attribute=style property. You should either change them while creating by changing pen width or you should change them in body of css.
Use rem and em for all the letter spacing, word spacing, etc.
And for the font-weight, it is because the initial declaration is overwriting your own font-weight.
you might find this useful i guess.. this are the common most use css text property
<h1 style="
text-align: center;
font-size: 25px;
color:#FF0000;
font-family: Arial Black,Arial,Helvetica,Verdana,Trebuchet MS,Comic Sans MS,sans-serif;
font-style: normal;
font-weight: 1000;
background-color: #D3D3D3;
line-height: 3;
">TEST 123</h1>
also about your question "font-weight:bold" not working perhaps it being overwritten by other value such as < h1 > which make text already huge...
So you can't really use letter-spacing in font declarations. What you could do however, is create a class which has the letter spacing you want, and then add the class to the HTML element. Like so:
#font-face {
font-family: 'Roboto';
url : 'https://fonts.googleapis.com/css2?family=Roboto:wght#400&display=swap';
font-weight: normal;
}
#font-face {
font-family: 'Open Sans';
url : 'https://fonts.googleapis.com/css2?family=Open+Sans&display=swap';
font-weight: normal;
}
.roboto-norm{
font-family: 'Roboto';
font-weight: normal;
}
.roboto-norm-ltr-spc{
font-family: 'Roboto';
font-weight: normal;
letter-spacing: 0.25em !important;
}
.opensans-norm{
font-family: 'Open Sans';
font-weight: normal;
}
.opensans-norm-ltr-spc{
font-family: 'Open Sans';
font-weight: normal;
letter-spacing: 0.25em !important;
}
<label class="roboto-norm">Normal roboto letter spacing</label>
<br><br>
<label class="roboto-norm-ltr-spc">Custom roboto letter spacing</label>
<br><br>
<br><br>
<label class="opensans-norm">Normal open sans letter spacing</label>
<br><br>
<label class="opensans-norm-ltr-spc">Custom open sans letter spacing</label>
As for the font-weight: normal part, what you're doing with the #font-face rule is that you're declaring the font. It's basically a variable of sorts, which you'd then be referencing when styling the HTML elements. The weight of the font is part of that.
The snippet below should make it clearer. What I've done is that I've imported 2 styles of the Roboto font, the first being of regular weight, aka 400, and the other of bold weight, aka 700.
#font-face {
font-family: 'Roboto';
url : 'https://fonts.googleapis.com/css2?family=Roboto:wght#400&display=swap';
font-weight: normal;
}
#font-face {
font-family: 'Roboto';
url : 'https://fonts.googleapis.com/css2?family=Roboto:wght#700&display=swap';
font-weight: bold;
}
*{
font-family: 'Roboto';
}
#normal{
font-weight: normal;
}
#bold{
font-weight: bold;
}
<label id="normal">normal font</label>
<br><br>
<label id="bold">bold font</label>

SASS Mixin typography issue while implementing multi language

I am working on a react website which use sass for managing styling. So in the website I have implemented typography for english language through sass mixins.
There are different headings and bodies in the typography like heading1, heading2 , body1, body2 etc . Format of each element in typography is like
#mixin body1{
font-size:10px,
font-weight: 700,
letter-spacing: 1px,
line-height:1
}
#mixin body2{
font-size:5px,
font-weight: 400,
letter-spacing: 1px,
line-height:1
}
And then I include this body in my component css like :
.primaryButton .text{
#include body1;
}
.secondaryButton .text{
#include body2;
}
so button is single component is react , we are just changing parent class based on variation props and so its styling .
Now the issue is that I have to implement typography for different languages like about 50 languages and I an not sure what generic approach will be best to implement .
Note :
We didn't use generic classes instead of mixin for typography because we have variation and theme for each component and for each variation and theme same element may have different font size and other properties so for different variation we load different typography elements based on component parent class.
Also I don't want to go in each file and then overwrite english typography based on parent class for each language as project size is too big for that and also 50 languages is also too many for that approach. And in future language can increase .
you can use like this
Placeholders
%body1{
font-size:10px;
font-weight: 700;
letter-spacing: 1px;
line-height:1;
}
%body2{
font-size:5px;
font-weight: 400;
letter-spacing: 1px;
line-height:1;
}
%body3{
font-size:5px;
font-weight: 400;
letter-spacing: 1px;
line-height:1;
}
Configs
$langsConfig: (
"en": (body2),
"fr": (body1, body2),
"cn": (body2, body3),
"bn": (body1, body2, body3),
);
css generator
#each $lang, $placeholderList in $langsConfig {
.#{$lang} {
.primaryButton {
.text {
#each $placeholder in $placeholderList {
#extend %#{$placeholder}
}
}
}
}
}
Output
.bn .primaryButton .text, .fr .primaryButton .text {
font-size: 15px;
font-weight: 700;
letter-spacing: 1px;
line-height: 1;
color: red;
}
.bn .primaryButton .text, .cn .primaryButton .text, .fr .primaryButton .text, .en .primaryButton .text {
font-size: 20px;
font-weight: 400;
letter-spacing: 1px;
line-height: 1;
color: green;
}
.bn .primaryButton .text, .cn .primaryButton .text {
font-size: 25px;
font-weight: 400;
letter-spacing: 1px;
line-height: 1;
color: yellow;
}
React implementation
export default function App() {
const lang = "en";
return (
<div className={`${lang}`}>
<div className="primaryButton">
<h1 className="text">Hello CodeSandbox</h1>
<h2 className="text">Start editing to see some magic happen!</h2>
</div>
</div>
);
}
Explanation:
Placeholder: Instead of mixing use placeholder.
Config: Language name and related mixing list
Generator: it will make a loop with configs and create the css is dynamic ways
NOTE: if you want to use component based scss. Then create a scss function and pass the variables in css generator.
Here is the Sandbox link
Let me know if it helps. It could be more dynamic if i could know the implementation on react side.

How to determine all CSS styles that are applied directly to an element?

Is it possible to get all CSS styles that are applied to a given HTML element either in its styles property/attribute or via CSS selectors?
I'm looking for the computed styles, but only those styles that are set on the element, not all existing styles that can possibly be set for the element.
Here is an example of what DOESN'T work.
let span = document.querySelector('span') ;
let compStyles = getComputedStyle(span) ;
console.log('The desired result is: "color: blue; font-style: italic"' ) ;
console.log('But instead we get: ', compStyles.cssText ) ;
div {color: red; font-weight: bold}
span {color: blue}
<div>
Hello <span style="font-style: italic">world</span>
</div>
getComputedStyle gives a huge list of unneeded stuff. I'm only looking for the styles that are being applied directly to the element.
For example, DevTools shows at the top...
(1) the effective styles applied to the element, and below that it shows...
(2) the styles inherited from the parent. Then on a different tab, it shows...
(3) all computed styles.
I'm looking for number (1) only.
Why I need this.
When you select text in a page and copy that text, Chrome puts in the clipboard HTML code that looks like this:
<span style="color: rgb(255, 0, 0); font-family: 'Times New Roman'; font-size: medium; font-style: normal; font-variant: normal; font-weight: bold; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; display: inline !important;">
Hello
</span>
<span style="color: blue; font-family: 'Times New Roman'; font-size: medium; font-variant: normal; font-weight: bold; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; font-style: italic;">
world
</span>
i.e. every element has all its needed styles inline in its style attribute. That way the HTML code can be pasted anywhere else and it will look the same.
What Chrome is doing is to make the HTML code independent of any style sheets that may exist in the source page.
This is what I'm trying to do. I want to take a section of the page and generate it's equivalent HTML code with all its necessary styles integrated in the HTML itself.
What I want to avoid, though, is that the resulting HTML ends up being ridiculously big.
If I just take the result of getComputedStyle for every element, the final HTML will be a gigantic string.
Chrome does a good job at embedding the "important" styles (those that matter), instead of embedding literally every possible style property on every HTML element.
In general it appears possible, however this does make it seem that it won't be possible in Chrome.
TL;DR: As of Chrome 64 you'll need to use a local development server to test functionality that depends on the CSS Object Model.
This snippet below is using this code, with some small changes for the case of the OP.
var proto = Element.prototype;
var slice = Function.call.bind(Array.prototype.slice);
var matches = Function.call.bind(proto.matchesSelector ||
proto.mozMatchesSelector || proto.webkitMatchesSelector ||
proto.msMatchesSelector || proto.oMatchesSelector);
// Returns true if a DOM Element matches a cssRule
var elementMatchCSSRule = function(element, cssRule) {
return matches(element, cssRule.selectorText);
};
// Returns true if a property is defined in a cssRule
var propertyInCSSRule = function(prop, cssRule) {
return prop in cssRule.style && cssRule.style[prop] !== "";
};
// Here we get the cssRules across all the stylesheets in one array
var cssRules = slice(document.styleSheets).reduce(function(rules, styleSheet) {
return rules.concat(slice(styleSheet.cssRules));
}, []);
var getAppliedCss = function(elm) {
// get only the css rules that matches that element
var elementRules = cssRules.filter(elementMatchCSSRule.bind(null, elm));
var rules = [];
if (elementRules.length) {
for (i = 0; i < elementRules.length; i++) {
var e = elementRules[i];
rules.push({
text: e.cssText.match(/\w\s{\s(.*?)}/)[1]
})
}
}
if (elm.getAttribute('style')) {
rules.push({
text: elm.getAttribute('style')
})
}
return rules;
}
var styleSheetList = document.styleSheets;
let span = document.querySelector('span');
var rules = getAppliedCss(span);
console.log(rules.map(r => r.text).join(''));
div {color: red; font-weight: bold}
span {color: blue}
<div>
Hello <span style="font-style: italic">world</span>
</div>

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)

How can I get links to stay active?

I'm making a site with a lecture on. The lecture is divided into chapters. Each chapter has it's own link and when clicked a new video loads an external html get loaded into a text window. I need these links to stay active, so that ppl know what chapter they're on.
Here's my current html:
<li>chapter1</li>
<li>chapter2</li>
..and so on..
Now, this works perfectly.. As I said, I need the links to stay active, and tried adding an addClass(this)
I.E:
onclick="javascript:loadContent('#pres','chapter2.html');changeVideo('chapter2');addClass(this)">...
function addClass(obj)
{
obj.className="active";
}
This doesn't work. I've also tried removing everything but the addClass function with no luck.
Any ideas?
function clickChapter(type, page, chapter){
loadContent(type, page);
changeVideo(chapter);
removeAllClass();
addClass(ocument.getElementById('id_'+chapter));
}
function removeAllClass(){
var aAnchor = document.getElementsByTagName('A');
for(var i=0; i<aAnchor.length; i++){
aAnchor[i].className = '';
}
}
<li>chapter1</li>
<li>chapter2</li>
You could try this...
first create a Cascaded style sheet(CSS) and in it write the code like :
a:active {
color: #006600;
font: 12px Verdana, Arial, Helvetica, San-serif;
text-decoration: none;
}
or
a:visited {
color: #006600;
font: 12px Verdana, Arial, Helvetica, San-serif;
text-decoration: none;
}
or
a:link {
color: #006600;
font: 12px Verdana, Arial, Helvetica, San-serif;
text-decoration: none;
}
then paste this code in the head of your html page:
<link type="text/css" href="<Path of the CSS>.css" rel="stylesheet"/>

Categories