I checked in the docs, but checking here too. 
Is there a GUI component which enables you to put a code editor, with syntax highlighting etc, onto a GUI view?
Pretty certain (but not 100%) that is a no in scide.
However… with GitHub - scztt/vscode-supercollider it might be possible. @scztt do you know if that would be possible with your language server?
Either way, I don’t think this is a simple matter.
Nope, there’s no way to do this sadly. Apart from just using the built in text editor widget (which isn’t great for code), you can also use WebView to open any web-based code editor, though it will take a minor amount of JavaScript hacking to get them to send the code back to SuperCollder and e.g. hook up something like Cmd+Enter.
Years ago I made this but unfortunately it requires a whole separate fork of supercollider because qt widgets are compiled with the application. I haven’t updated it in a while but it works pretty well, at least for the purpose I built it for (editable short functions for cueing live multimedia performance). If this is interesting for you I can try to update my fork to the latest supercollider version…
Okay, I think that answered my question, thank you!
How about using the code mirror inside the SC documentation?
Step 1. Save the following code as an HTML file onto the HelpResource in SC folder:
<!doctype html><html lang='en'><head><title>Code Mirror Template Example | SuperCollider 3.14.0-dev Help</title>
<link rel='stylesheet' href='./scdoc.css' type='text/css' />
<link rel='stylesheet' href='./codemirror.css' type='text/css' />
<link rel='stylesheet' href='./editor.css' type='text/css' />
<link rel='stylesheet' href='./custom.css' type='text/css' />
<meta name='viewport' content='width=device-width, initial-scale=1'>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<script src='./lib/jquery.min.js'></script>
<script src='./lib/codemirror-5.39.2.min.js' type='text/javascript'></script>
<script src='./lib/codemirror-addon-simple-5.39.2.min.js' type='text/javascript'></script>
<script>
var helpRoot = '.';
var scdoc_title = 'Code Mirror Template Example';
var scdoc_sc_version = '3.14.0-dev';
</script>
<script src='./scdoc.js' type='text/javascript'></script>
<script src='./docmap.js' type='text/javascript'></script>
<body>
<div class='contents'>
<textarea class='editor'>// Type your code herein!</textarea>
<script src='./editor.js' type='text/javascript'></script>
</body></html>
Step 2. Use the following code for example:
(
~path = "/Users/prko/Library/Application Support/SuperCollider/Help/code-mirror-example core.html";
w = Window("webBrowser", Window.screenBounds.insetBy(100, 40));
WebView(w, bounds: w.bounds.width@w.bounds.height)
.url_(~path)
.enterInterpretsSelection_(true);
w.front
)
The following video shows how I did it:
https://www.dropbox.com/scl/fi/n1jwgzva04y1jrshgzdxe/code-mirror-in-WebView.mov?rlkey=pa4ynm9u5zldptcdti969exn8&dl=0
3 Likes