I am trying to add highlight.js to my Hugo website with Anatole theme.
This is how a code chunk looks like before adding highlightjs:
And this is how it looks like after adding highlight.js:
This is of course not the way it should look.
To add highlight.js I added the following code to layouts/partials/head.html:
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css"
/>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js">
</script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/languages/r.min.js">
</script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/languages/python.min.js">
</script>
And I added the following code to layouts/partials/article_footer_js.html:
<script>hljs.initHighlightingOnLoad();</script>
What am I doing wrong?
So, I'm not very good at css but I found a solution. My solution was to add a file assets/scss/partials/components/_code.scss with the following content:
pre code.hljs,
code.hljs,
.hljs,
.hljs-comment,
.hljs-tag,
.hljs-punctuation,
.hljs-tag .hljs-name,
.hljs-tag .hljs-attr,
.hljs-keyword,
.hljs-attribute,
.hljs-selector-tag,
.hljs-meta .hljs-keyword,
.hljs-doctag,
.hljs-name,
.hljs-type,
.hljs-string,
.hljs-number,
.hljs-selector-id,
.hljs-selector-class,
.hljs-quote,
.hljs-template-tag,
.hljs-deletion,
.hljs-title,
.hljs-section,
.hljs-regexp,
.hljs-symbol,
.hljs-variable,
.hljs-template-variable,
.hljs-link,
.hljs-selector-attr,
.hljs-operator,
.hljs-selector-pseudo,
.hljs-literal,
.hljs-built_in,
.hljs-bullet,
.hljs-code,
.hljs-addition,
.hljs-meta,
.hljs-meta .hljs-string,
.hljs-emphasis,
.hljs-strong {
font-family: monospace, monospace;
}
And then adding the following line at the end of assets/scss/main.scss:
#import './partials/components/code';
With these changes the font family of the highlighted code went back to monospace and the font size is the same for all the code.
CSS Code
#font-face {
font-family: Calibri;
src: url("fonts/calibri.ttf");
font-style: normal;
}
JS Code
doc.setFont('Calibri');
doc.setFontSize(7.5);
doc.setFontType("normal");
doc.text(10, 10, "Hi, How r u");
I want to add Calibri Font, but it is not working
List of js script included
<script src="/assets/global/scripts/jspdf/jspdf.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/acroform.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/from_html.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/addhtml.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/addimage.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/annotations.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/autoprint.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/canvas.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/cell.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/context2d.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/javascript.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/outline.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/prevent_scale_to_fit.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/split_text_to_size.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/standard_fonts_metrics.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/svg.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/total_pages.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/zlib.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/png.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/addimage.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/png_support.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/filesaver.js" type="text/javascript"></script>
CSS
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : Apr 23, 2017, 12:57:52 PM
Author : common
*/
#font-face {
font-family: Calibri;
src: url("fonts/calibri.ttf");
font-style: normal;
}
/*
#font-face {
font-family: Calibri;
src: url("fonts/calibrii.ttf");
font-style: italic;
}
#font-face {
font-family: Calibri;
src: url("fonts/calibrib.ttf");
font-style: normal;
font-weight: bold;
}
#font-face {
font-family: Calibri;
src: url("fonts/calibriz.ttf");
font-style: italic;
font-weight: bold;
}*/
For jsPdf Version 1.4.0 and later there is possibility for using custom font (ttf). Custom font should be base64 encoded. Unfortunately, not all fonts working.
var doc = new jsPDF('landscape');
// to generate 'yourCustomFontTtfBase64Encoded' you can use
// jsPDF-CustomFonts-support library (on their
// github page there are all instructions for that)
doc.addFileToVFS('yourCustomFont.ttf', 'yourCustomFontTtfBase64Encoded');
doc.addFont('yourCustomFont.ttf', 'yourCustomFont', 'normal');
doc.setFont('yourCustomFont');
jsPDF-CustomFonts-support library for generating 'yourCustomFontTtfBase64Encoded' is here: https://github.com/sphilee/jsPDF-CustomFonts-support
Hi you can try and modify fonts like this,
API.addFont = function(fontScript, font, style) {
addFont(fontScript, font, style, 'StandardEncoding');
};
above function you will have to add to lib/before your font change invocation, but i would suggest add script tag just after you load jspdf, and add this function in that script tag.
Now you need to add font css,
and then you can modify font of the pdf like this.
doc.addFont('fonts/calibri.ttf', 'Calibri', 'normal');
doc.setFont('Calibri');
doc.text(50,50,'Now this is Calibri');
Here's is the solution I'm using. Works well (see below for working codepen)...
First, as others have mentioned - you'll need these two libraries:
jsPDF: https://github.com/MrRio/jsPDF
jsPDF-CustomFonts-support: https://github.com/sphilee/jsPDF-CustomFonts-support
Next - the second library requires that you provide it with at least one custom font in a file named default_vfs.js. I'm using two custom fonts - Arimo-Regular.ttf and Arimo-Bold.ttf - both from Google Fonts. So, my default_vfs.js file looks like this:
(function (jsPDFAPI) {
"use strict";
jsPDFAPI.addFileToVFS('Arimo-Regular.ttf','[Base64-encoded string of your font]');
jsPDFAPI.addFileToVFS('Arimo-Bold.ttf','[Base64-encoded string of your font]');
})(jsPDF.API);
Obviously, your version would look different, depending on the font(s) you're using.
There's a bunch of ways to get the Base64-encoded string for your font, but I used this: https://www.giftofspeed.com/base64-encoder/.
It lets you upload a font .ttf file, and it'll give you the Base64 string that you can paste into default_vfs.js.
You can see what the actual file looks like, with my fonts, here: https://cdn.rawgit.com/stuehler/jsPDF-CustomFonts-support/master/dist/default_vfs.js
So, once your fonts are stored in that file, your HTML should look like this:
<script src="js/jspdf.min.js"></script>
<script src="js/jspdf.customfonts.min.js"></script>
<script src="js/default_vfs.js"></script>
Finally, your JavaScript code looks something like this:
const doc = new jsPDF({
unit: 'pt',
orientation: 'p',
lineHeight: 1.2
});
doc.addFont("Arimo-Regular.ttf", "Arimo", "normal");
doc.addFont("Arimo-Bold.ttf", "Arimo", "bold");
doc.setFont("Arimo");
doc.setFontType("normal");
doc.setFontSize(28);
doc.text("Hello, World!", 100, 100);
doc.setFontType("bold");
doc.text("Hello, BOLD World!", 100, 150);
doc.save("customFonts.pdf");
This is probably obvious to most, but in that addFont() method, the three parameters are:
The font's name you used in the addFileToVFS() function in the default_vfs.js file
The font's name you use in the setFont() function in your JavaScript
The font's style you use in the setFontType() function in your JavaScript
You can see this working here: https://codepen.io/stuehler/pen/pZMdKo
Hope this works as well for you as it did for me.
You can't at the moment.
If you take a look to the source code, you see there is a switch that, if it doesn't know the font, returns times as font
switch (fontName) {
case 'sans-serif':
case 'verdana':
case 'arial':
case 'helvetica':
fontName = 'helvetica';
break;
case 'fixed':
case 'monospace':
case 'terminal':
case 'courier':
fontName = 'courier';
break;
case 'serif':
case 'cursive':
case 'fantasy':
default:
fontName = 'times';
break;
}
You can either use one of that fonts, or edit the library to support your font.
Otherwise, there is a work in progress library that add support to custom fonts: https://github.com/sphilee/jsPDF-CustomFonts-support
After adding all the needed files, you should use it like this:
doc.addFont('fonts/calibri.ttf', 'Calibri', 'Calibri-normal', 'normal');
Like stated above you can use the jsPDF-CustomFonts-support library at https://github.com/sphilee/jsPDF-CustomFonts-support.
There are instructions on the READ.ME file, but what got me going were these instructions https://github.com/sphilee/jsPDF-CustomFonts-support/issues/16#issuecomment-307174041:
Upload your .ttf font to Font Squirell https://www.fontsquirrel.com/tools/webfont-generator
Press download and you will get a compressed file with a new .ttf file. Now you have to encode to base64 https://www.giftofspeed.com/base64-encoder/.
Once you have the base64 code of your font you have to go to the vfs_fonts.js file that you have download with the jsPDF-CustomFonts-support https://github.com/sphilee/jsPDF-CustomFonts-support and after one of the ',' used to separate the different fonts in that file you have to add: "YOUR_FONT_NAME.ttf":"YOUR BASE64 CODE", (remember to finish with a comma at the end, after the quotes).
Once you do that you can add the function doc. addFont("YOUR_FONT_NAME.ttf","YOUR_FONT_NAME.ttf","normal","WinAnsiEncoding").
I know that with basic JS you can read a <script>'s source code like so:
<pre id="scriptContents"></pre>
<script id="myScript" type="text/javascript">
var script = document.getElementById('myScript');
var contents = script.innerHTML;
scriptContents.innerText = contents;
</script>
So my question is: Is there any way similar to this in Greasemonkey/Tampermonkey? I want to be able to read the Greasmonkey script's source code as string.
The reason I'm asking is because the Greasemonkey script is magically included to the page and doesn't have a "physical" representation like the above <script> block.
More background: I'm writing a script but it needs a lot of styles and also a Mustache template which is really hard to provide in JavaScript in a readable form. I want to prevent having the escape every single apostrophe or quote character and also joining the string or adding \ at the end of the line. I found a tricky way to do this, but still looking for alternatives. Here's the current version:
function hereDoc(f) { return f.toString().replace(/^[^\/]*\/\*!/, '').replace(/\*\/[^\/]*$/, ''); }
$('head').append(hereDoc(function() {/*!
<script id="template" type="x-tmpl-mustache">
<div>...
</script>
<style type="text/css">
lots.of #css { code: here; }
</style>
*/}));
My website allows user write short stories. I want they can free to format and style text, so I install NicEdit to do that. But NicEdit just has 9 default fonts; how to add more?
This is my editor. It use default code with full panel control.
Very happy, I've added news fonts NicEdit successful. I post answer here, hope it userful for everyone has the same problem.
1.Download font file, save in some folder, in my way is 'css/font'
2.Register in css file: add a css file "CustomFonts.css" has content:
(I use Fugaz One download from Google Font)
#font-face {
font-family: "FugazOne";
src: url('font/FugazOne-Regular.ttf');
src: url('font/FugazOne-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
You may change path to font file.
3.Link css file in html form, before add nicEdit.js lib:
<link rel="stylesheet" type="text/css" href="css/customFont.css" />
<script type="text/javascript" src="js/nicEdit/nicEdit_dev.js"></script>
4.Open nicEdit.js and find word "nicEditorFontFamilySelect". You will see a fonts list use in nicEdit, add new font here by font-family register in css:
sel : {'arial' : 'Arial',..., 'FugazOne':'FugazOne'},
5.tada... DONE!
P/s: when show content from database, you must sure webpage had load customFont.css.
New to designing on the Volusion platform and stuck after investigating the help topics on the support forms. I need to override a CSS style on all pages but my default.asp homepage. I am attempting to do this with javascript but it doesn't seem to be working.
Here is the demo for the site: http://v1330583.ovjk2w9aumkd.demo19.volusion.com/default.asp
I am attempting to modify my #content rule by beginning with this Javascript:
<script type="text/javascript">
//<![CDATA[
if (location.pathname == "/ProductDetails.asp") ||
location.pathname.indexOf("-p/") != -1 ||
location.pathname.indexOf("_p/") != -1)
var onHomepage = true;
if(!onHomepage)
document.writeln("\n<style type='text/css'>content {
padding: 20px background-color: #fff}</style>\n\n");
//]]> </script>
Can anyone tell me
Where I should inset this code.
If there is a better way to do this.
Would really appreciate any help!
There's a much simpler way to do this in Volusion without Javascript. If you log in to your dashboard, go to 'Design->File Editor" and then click on the template HTML file (it will be under the heading 'Template Files', you'll be in the main template file for your site.
In between the <body> tags you'll just add a div with an id of "if_not_homepage" and the site will only read the contents of this div if not on the default.asp page. For example:
<div id="if_not_homepage">
<style type="text/css">
#content{
padding:20px;
background-color:#fff;
}
</style>
</div>
OR you could call a separate stylesheet completely from within this div (for example):
<div id="if_not_homepage">
<link rel="stylesheet" href="/v/vspfiles/templates/YOUR_TEMPLATE/css/inner_style.css" />
</div>
If you place the stylesheet within the directory "/v/vspfiles/templates/YOUR_TEMPLATE/css/" you'll be able to edit the stylesheet from within the File Editor in the Volusion dashboard as well (like your other stylesheets).
Alternately, there is a div with an id of "if_homepage" that is read only if the user is on the default.asp (opposite of "if_not_homepage").
On a completely separate note, in your code above, you are missing either a class (.) or id (#) selector on 'content' in your CSS, so that may have something to do with it as well.
Instead of a style tag, I think you are better off setting the style directly with jQuery (if the DOM is loaded) or writing out a link tag to a separate style sheet.