Copy link to clipboard
Copied
I want to create layout for code editor in Adobe XD (something like this: https://mir-s3-cdn-cf.behance.net/project_modules/1400/2e966c66760499.5b212e4d0b583.png ) and I don't know how to format code which is TEXT in the style of some programming language (for example python).
I can change font to Courier New (which is nice), but I have no idea how to change colors of the code - to see functions, loops and so on.
I have no idea how to deal with this problem. Should I use any plugin or somehow format the text?
Can somebody help with this issue?
1 Correct answer
We don't have this feature, but it would make a great plugin!
There are a few JS syntax highlighting libraries, but they would need to be changed to generate XD text runs, rather than html spans:
* microlight/microlight.js at master · asvd/microlight · GitHub
* GitHub - highlightjs/highlight.js: Javascript syntax highlighter
* GitHub - ccampbell/rainbow: Simple syntax highlighting library written in javascript
Copy link to clipboard
Copied
You can find some plug ins for reviewing code."Copy CSS to clipboard" or "Web Export" and try to look on code. Also here is referance to W3Schools Online Web Tutorials where you can find the basic.
Copy link to clipboard
Copied
Just highlight the portion of your text and change the Fill colour - but I guess you know that?
Copy link to clipboard
Copied
Just draw out an area text with the text tool..., don't use point text (e.g. draw a rectangle with the text tool)..set to the font of your choice then highlight the text via selection and changing the fill color in the property inspector.
Copy link to clipboard
Copied
Then I thought the OP might have meant automated code formatting...
Copy link to clipboard
Copied
We don't have this feature, but it would make a great plugin!
There are a few JS syntax highlighting libraries, but they would need to be changed to generate XD text runs, rather than html spans:
* microlight/microlight.js at master · asvd/microlight · GitHub
* GitHub - highlightjs/highlight.js: Javascript syntax highlighter
* GitHub - ccampbell/rainbow: Simple syntax highlighting library written in javascript

