I don't know if I'm doing something wrong, but I have the following Problem:
I have a folder with some .md files including SUMMARY.mdand README.md.
I also have a localtheme folder with some changes in the HTML.
book.jsonlooks like this:
"theme": "./localtheme",
"gitbook": ">=2.0.0",
"styles": {
"website": "styles/website.css"
}
I have added a styles/website.css into the localtheme folder.
Now my gitbook has the changes I made in the localtheme folder EXCEPT the additional style changes in styles/website.css.
What am I doing wrong?
After a while I found the problem:
"theme": "./localtheme"
is responsible for the complete layout of your gitbook. If you want to add new styles via
"styles": {
"website": "styles/website.css"
}
you need to delete the theme line or else it won't work.
This way you can add styles easily and stay up to date with the new theme changes
Related
I've got an Astro project using markdown content collections for blog posts. In these posts I have svg images referenced as so:
This shows the SVG inside of an <img> tag but I want to inline the SVG in these scenarios. This is where the rehype-inline-svg plugin is supposed to help me. But when I add the plugin into my Astro config, I get an error ENOENT: no such file or directory, open '/assets/images/image-1.svg'
I have tried several paths to reference this image, but none work. I figure at the very least, the path should stay the same. I am not sure what else to do to get this to work. My Astro config is as follows:
import { defineConfig } from 'astro/config';
import inlineSVG from '#jsdevtools/rehype-inline-svg';
export default defineConfig({
markdown: {
rehypePlugins: [inlineSVG]
},
});
My original goal was to display Excalidraw SVGs with the font. Fonts need to be embedded if contained within an <img> tag so I am trying this inline approach. I would be happy to know if you have a good automated technique for achieving this too.
In your case, is /assets/images/image-1.svg in your public/ directory? Looking at rehype-inline-svg’s code it looks like it tries to resolve SVG paths relative to the root of the project, so you might need to include public/ in your Markdown somewhat unusually:
When I build backend and frontend with the same language, JavaScript, I find it very hard to distinguish between both. Is there any way to have different themes for each project in the workspace? for example change the file association for the frontend to show React logo instead of the default JavaScript logo (I use Material Icon Theme)
"material-icon-theme.files.associations": {
"*.js": "react"
// HOW CAN I MAKE THIS APPLY FOR THE FRONTEND PROJECT ONLY?
},
using the .jsx for frontend is not a good option as it will require extra work when importing things, also not all of my frontend files uses React.js. And I will lose a lot of snippets.
I have written the extension When File that allows you to change workbench colors based on the file path.
Read the extension page for the possible use cases.
An example if you have one folder open in VSC
"whenFile.change": {
"/server/": {
"workbenchColor": {
"activityBar.background": "#509050"
}
},
"/client/": {
"workbenchColor": {
"activityBar.background": "#905080"
}
}
}
Give a try to Peacock theme. It gives different color to each vscode instance.
https://github.com/johnpapa/vscode-peacock
You could Try Using VS Code Color Themes.
https://code.visualstudio.com/docs/getstarted/themes
I have two problem with Sails.js layout,
The first one is I want to remove or change the layout for default answer like 403, 404, 500... but I don't find how to do this
My second problem is if I want to use another layout for a entire Controller, is it possible to override layout for all action in Controller or do I have to put it in every res.view({layout : "mylayout"}) ?
EDIT : just find I can change the layout for http error by editing files under api/responses/
You can edit your http erros layout by going to your /views folder and edit the error files. You can also edit your default layout by going to /views and edit layout.ejs.
If you want to specify a diffrent layout files a specific file you can edit the file's route like so:
'get /privacy': {
view: 'users/privacy',
locals: {
layout: 'users'
}
},
for the error files, they dont use a layout so you can just edit them the way you want them to be.
I want to ask is there ANY way or extension that can pre-highlight text within the iframe whenever a new window is opened containing iframe? I have tried many extension but none of them works.
I need to filter out content based on certain keywords and the content is within iframe. I can do it with CTRL+F but there are many keywords like 10-15 within each article to be found. So it makes my job very tough and time consuming. Few extensions that I have tried from chrome are multi highlighter, pearls, FF but none of them seems to work.
I also know the reason why these extension can't access content within the iframe i.e. due to cross origin policies.
But I also remember around an year ago I worked with chrome extension named 'Autofill' that could pre-select form elements whenever I opened new chrome window containing iframe.
So is there any work around?
You can set your extension permission to run content scripts in all frames as document at http://developer.chrome.com/extensions/content_scripts.html#registration by setting all_frames to true in the content scripts section of your manifest file. Adding to Google's example from that page, part of your manifest file might look like
{
"name": "My extension",
...
"content_scripts": [
{
"matches": ["http://www.google.com/*"],
"css": ["mystyles.css"],
"js": ["jquery.js", "myscript.js"],
"all_frames": true
}
],
...
}
You'll need to be careful since your content scripts are going to be inject into the page once for the parent page and one for each iFrame on the page. Once your content script is injected into all frames on the page you can work your magic with finding and highlighting text.
if (window === top) {
console.log('Running inside the main document', location.href);
} else {
console.log('Running inside the frame document', location.href,
[...document.querySelectorAll('*')]);
}
I'm trying to work on a Chrome browser extension which does fun things on a contextmenu. The problem is, I can't get the JS files to load within the manifest.json content_scripts.
I don't receive an error, the files simply do not load.
The scripts are good, if I put them in my background page, they fire fine through that background page. The downside of that is it's restricted to only the background page.
{
"name": "Mini",
"description": "Mini",
"permissions": ["contextMenus","management","contentSettings","tabs","http://*/*","https://*/*","editable"],
"version": "0.1",
"manifest_version": 1,
"background_page": "mini.html",
"icons" : {"16" : "mini.png"},
"contexts" : ["link","tab","page"],
"content_scripts": [{"matches":["<all_urls>"],"js":["jquery172min.js","mini.js"]}]
}
I've tried all forms of matches, including "http://\*/\*", "https://\*/\*", "\*://\*/\*"
I've tried whitespaces, no whitespaces. I'm drawing a blank here.
Any help would be appreciated.
$(document).ready(function () {
alert("page is ready");
},true);
My apologies for that. This is a copy of the javascript/Jquery I'm using to test whether the extension has loaded or not. It's just a simple alert.
Content scripts cannot use the chrome.contextMenus API (in fact, these can only use some of the chrome.extension methods).
It's possible to apply match patterns to individual menu items, via chrome.contextMenus.create({title: 'Test', documentUrlPatterns: 'http://*/*'});.
Created menu items can also be modified (chrome.contextMenus.update) and removed (chrome.contextMenus.remove).
To communicate between a Content script and the background page, see Message passing.