I'm trying to implement inline images with mdx files.
But I can't make it happen, no image is loaded.
After a bit of reading some solutions here, they suggest to add gatsby-remark-images also in the plugins array in options.plugins as in
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
`gatsby-remark-images`,
{
resolve: `gatsby-plugin-mdx`,
options: {
gatsbyRemarkPlugins: [
{
resolve: `gatsby-remark-images`,
},
],
plugins: [`gatsby-remark-images`],
},
},
in my mdx file 
It didn't work for me though.
Anybody can help me with some guidance ?
Cheers
Yes turned out after spending half a morning on the matter that there's no needs of quotes in the md link to the img
Related
I'm trying to change the color of the word after import in JS, in VS Code. I attached a screenshot of what I mean.
Screenshot:
What I'm referring to is underlined in red
I didn't find a valid entry in the textMateRules for this.
I'd appreciate some help. Thanks :)
I don't know which flavor of javascript you are using but you can use the following in your settings.json:
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "variable.other.readwrite.alias.js",
"settings": {
"foreground": "#FF0000"
}
}
]
}
How to know which scopes a given token has
In your command palette type:
> Developer: Inspect Editor Tokens and Scopes
This will show a popup of information related to the token at cursor:
You will see applicable scope entries at the bottom for textmate scopes, you can use any of the options listed, but the topmost option is the most specfic option
If you use the Inspect Editor Tokens and Scopes command (from the Command Palette) you will see this scope:
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "variable.other.readwrite.alias.js.jsx",
"settings": {
"foreground": "#ff0000",
"fontStyle": "bold underline"
}
},
]
},
You cannot add a colored underline without also changing the font color also.
If you really want to color the line differently than the text (and many other formatting options, see https://code.visualstudio.com/api/references/vscode-api#DecorationRenderOptions
use the Highlight extension:
"highlight.regexes": {
"(import\\s+)(.*?)(\\s+from .*)": {
"filterLanguageRegex": "javascriptreact",
"decorations": [
{},
{
"borderWidth": "0 0 2px 0",
"borderColor": "red",
"borderStyle": "solid"
}
{}
]
}
},
LOL: you probably just wanted to change the word color, not the underlining. Nevertheless, the Highlight extension gives you many more options, like outlines, borders, backgroundColor, letterSpacing, even before and after css properties - so you can easily make the text you want to stand out.
I understand that GitHub's GraphQL-based v4 API is much more efficient than the v3 API.
I would like to use the GraphQL API to retrieve, for a given repo:
All of the open milestones.
For each milestone, its title, description, all of its issues (open and closed)
For each issue, its title, description, status, and all messages.
Is there a straightforward way to do this?
Yes. It is straightforward to do so . The query looks like :
{
repository(owner: "gatsbyjs", name: "gatsby") {
description
url
milestones(states: [OPEN],first:2) {
nodes{
title
description
url
issues(states:[OPEN,CLOSED], first:2){
nodes{
title
state
url
comments(first:2){
nodes{
url
body
createdAt
}
pageInfo{
hasNextPage
endCursor
}
}
}
pageInfo{
endCursor
hasNextPage
}
}
}
pageInfo{
endCursor
hasNextPage
}
}
}
}
Note:
For the repository which the url is https://github.com/gatsbyjs/gatsby , its owner is gatsbyjs and its name is gatsby
Go to its API Explorer to try and fine tune the query.Click Ctrl+Space will auto-suggest the available fields that can be retrieved.
Do the paginating by yourself to loop through all records by adjusting the starting cursor and the number of records to be returned in first , after.
It gives you the following :
{
"data": {
"repository": {
"description": "Build blazing fast, modern apps and websites with React",
"url": "https://github.com/gatsbyjs/gatsby",
"milestones": {
"nodes": [
{
"title": "Next Major",
"description": "Issues that will require a breaking change, and which would constitute being done in the next major version of Gatsby.",
"url": "https://github.com/gatsbyjs/gatsby/milestone/5",
"issues": {
"nodes": [
{
"title": "Make accessibility warnings errors",
"state": "OPEN",
"url": "https://github.com/gatsbyjs/gatsby/issues/19945",
"comments": {
"nodes": [
{
"url": "https://github.com/gatsbyjs/gatsby/issues/19945#issuecomment-568891716",
"body": "Hiya!\n\nThis issue has gone quiet. Spooky quiet. 👻\n\nWe get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.\nIf we missed this issue or if you want to keep it open, please reply here. You can also add the label \"not stale\" to keep this issue open!\nAs a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out [gatsby.dev/contribute](https://www.gatsbyjs.org/contributing/how-to-contribute/) for more information about opening PRs, triaging issues, and contributing!\n\nThanks for being a part of the Gatsby community! 💪💜",
"createdAt": "2019-12-25T12:02:26Z"
},
{
"url": "https://github.com/gatsbyjs/gatsby/issues/19945#issuecomment-570779866",
"body": "Hey again!\n\nIt’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.\nPlease keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m `HUMAN_EMOTION_SORRY`. Please feel free to reopen this issue or create a new one if you need anything else.\nAs a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out [gatsby.dev/contribute](https://www.gatsbyjs.org/contributing/how-to-contribute/) for more information about opening PRs, triaging issues, and contributing!\n\nThanks again for being part of the Gatsby community! 💪💜",
"createdAt": "2020-01-04T12:02:28Z"
}
],
"pageInfo": {
"hasNextPage": false,
"endCursor": "Y3Vyc29yOnYyOpHOIgVo2g=="
}
}
},
{
"title": "Configurable output folder",
"state": "OPEN",
"url": "https://github.com/gatsbyjs/gatsby/issues/1878",
"comments": {
"nodes": [
{
"url": "https://github.com/gatsbyjs/gatsby/issues/1878#issuecomment-324062470",
"body": "Do you have a specific use case in mind? This has been discussed before but no one has come up with a concrete use case that justified adding a new option.\r\n\r\nEvery option we add to Gatsby makes the project more complex which has all sorts of long-term costs so unless something is really valuable, I'd rather people handle this sort of thing themselves e.g. just copy the files to the output directory you want or create a symlink. This could easily be turned into a plugin that people could install, etc.",
"createdAt": "2017-08-22T15:27:41Z"
},
{
"url": "https://github.com/gatsbyjs/gatsby/issues/1878#issuecomment-324074853",
"body": "Yes, I have a use-case. I am going to use Gatsby for a documentation part as a part of complex project. All static files (Gatsby output, plus some others) should be placed into one folder `build`, that will be deployed somehow later. In other words, the Gatsby output is only one subfolder in my setup.\r\n\r\nSo far I have worked this around in `postbuild` step, but it looks hacky:\r\n\r\n```\r\n\"build\": \"gatsby build\",\r\n\"postbuild\": \"mv public build/gatsby-subsite\"\r\n```\r\nAdding configurable output folder will reduce this complexity and will help me not to move files around one more time.",
"createdAt": "2017-08-22T16:08:21Z"
}
],
"pageInfo": {
"hasNextPage": true,
"endCursor": "Y3Vyc29yOnYyOpHOE1D9ZQ=="
}
}
}
],
"pageInfo": {
"endCursor": "Y3Vyc29yOnYyOpLPgAAAAAAAArvODwULXA==",
"hasNextPage": true
}
}
}
],
"pageInfo": {
"endCursor": "Y3Vyc29yOnYyOpHOAEEbsw==",
"hasNextPage": false
}
}
}
}
}
When working with a limited dataset my jsonata expression works as intended, but with a larger one I keep getting "Expression evaluation timeout: Check for infinite loop". Is there any way to optimize this expression to avoid timeouts?
Check try.jsonata.org/ryGcRwxkr for an example with a working dataset.
Please try pasting this json.
{
"type": "FeatureCollection",
"features": $map($[0].features, function($v){
{
"type": $v.type,
"geometry": $v.geometry,
"properties": $merge([$v.properties,{"fecha":$$[1][tm=$v.properties.tm].fecha}])
}
})
}
Thanks in advance!
Update
I found it is a limitation of the JSONata Excerciser. Anyway I'd like to optimize the expression because it is very resource demanding. Thanks again!
TLDR; How can I have an extension colorize the syntax the extension is defining without it actually being a color theme the user has to enable?
I'm attempting to port this Sublime Text plugin (ToDone) to VSCode.
It creates a grammar for todo lists and then uses syntax highlighting to emphasize important tasks, mute completed tasks, etc.
I found "editor.tokenColorCustomizations", via Customize a Color Theme. It works with the new syntax when I use it in my user settings, but fails when I use it in the package.json#contributes portion of the extension manifest.
{
"contributes": {
"languages": [
{
"id": "todone",
"aliases": [
"ToDone",
"To-Done"
],
"extensions": [
".todone",
".todo"
]
}
],
"grammars": [
{
"language": "todone",
"scopeName": "text.todone",
"path": "./todone.tmLanguage"
}
],
"configurationDefaults": {
"[todone]": {
"editor.insertSpaces": false,
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "symbol.definition.task-heading.todone",
"settings": {
"foreground": "#ff8800"
}
}
]
}
}
}
}
}
So far, the syntax seems ok — it's exactly what is being used by the Sublime plugin and the colors from the user-settings are applied correctly. Also, the format of the settings seems ok because "editor.insertSpaces" is being applied and the colors are working when present in the user-settings.
Lastly, I get a very disappointing 'Warning' 'Unknown editor configuration setting' message on the "editor.tokenColorCustomizations" setting in the extension package.json.
So, sounds like this setting is not enabled for extensions?
Another possible route I saw was to use decorators. But, I didn't see anything on inspecting the syntax tokens associated with a portion of text in the docs, e.g. some way to iterate through the syntax tokens of the document to apply decorators. So, the decorator route sounds like the hard-way compared to "editor.tokenColorCustomizations".
Any suggestions on how to make this work would be greatly appreciated.
Edit: The code, so far, is on GitHub: tiffon/vscode-todone
It only fails if you specify a specific language. It is working for me if I do not specify the todone extension.
"configurationDefaults": {
"editor.insertSpaces": false,
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "symbol.definition.task-heading.todone",
"settings": {
"foreground": "#ff8800"
}
}
]
}
}
In response to my question here, I was referred to "jquery datatables plugin" which (I think) I found, but which link is not allowed here for some reason.
However, although I added the requisite libraries (one jQuery and one CSS) as "External Resources" to my jsfiddle here and am using precisely the same HTML and jQuery as on their sample page:
$(document).ready(function() {
$('#example').dataTable( {
columnDefs: [ {
targets: [ 0 ],
orderData: [ 0, 1 ]
}, {
targets: [ 1 ],
orderData: [ 1, 0 ]
}, {
targets: [ 4 ],
orderData: [ 4, 0 ]
} ]
} );
} );
...running it doesn't seem to make the table sortable.
What am I missing?
I was also referred to "jQuery Table Sorter" but it doesn't seem to be available on a CDN, and thus would not be available on a jsfiddle page.
UPDATE
Actually, the aforementioned "jQuery Table Sorter" does seem to be available on a CDN, as Jason points out at the other question but, now that I've gotten the other working, I reckon I'll stick with it.
My bad: in my ignorance of CDN reference standards, I assumed the leading double whacks were unnecessary and removed them when adding to the External Resources. IOW, instead of pasting this:
cdn.datatables.net/1.10.0/js/jquery.dataTables.js
...it needs to be this:
//cdn.datatables.net/1.10.0/js/jquery.dataTables.js
On reinstating the double-whacks (which looked like they were being commented out to me), it all runs fine now here