flaskcode

https://github.com/sujeetkv/flaskcode
Admin
Web based code editor on Python Flask framework that integrates Monaco Editor for browser-based code...
Tokens:12,490
Snippets:210
Trust Score:7.8
License:MIT
Update:4 months ago
Show doc for...
Tokens:
Raw
### Install FlaskCode

Source: https://github.com/sujeetkv/flaskcode/blob/dev/README.md

Install the FlaskCode package using pip. This command fetches and installs the latest stable version from PyPI.

```bash
pip install flaskcode
```

--------------------------------

### Install Monaco Editor

Source: https://github.com/sujeetkv/flaskcode/blob/dev/flaskcode/static/vendor/monaco-editor/README.md

Install the Monaco Editor package using npm. This command downloads the editor and its associated files.

```bash
> npm install monaco-editor
```

--------------------------------

### Get FlaskCode CLI Help

Source: https://github.com/sujeetkv/flaskcode/blob/dev/README.md

Display the help message for the FlaskCode command-line interface. This shows available options and their usage.

```bash
flaskcode --help
```

--------------------------------

### Run FlaskCode from CLI

Source: https://github.com/sujeetkv/flaskcode/blob/dev/README.md

Launch FlaskCode as a standalone application from the command line, specifying the base path for resources. This command starts the web server.

```bash
flaskcode /path/to/resource/folder
```

--------------------------------

### Enable TypeScript Inlay Hints

Source: https://github.com/sujeetkv/flaskcode/blob/dev/flaskcode/static/vendor/monaco-editor/CHANGELOG.md

Configure inlay hints for TypeScript. This allows for more detailed code information to be displayed directly within the editor.

```typescript
monaco.languages.typescript.typescriptDefaults.setInlayHintsOptions({
	includeInlayParameterNameHints: 'all',
	includeInlayParameterNameHintsWhenArgumentMatchesName: true,
	includeInlayFunctionParameterTypeHints: true,
	includeInlayVariableTypeHints: true,
	includeInlayPropertyDeclarationTypeHints: true,
	includeInlayFunctionLikeReturnTypeHints: true,
	includeInlayEnumMemberValueHints: true
});
```

--------------------------------

### Render Directory Tree Macro

Source: https://github.com/sujeetkv/flaskcode/blob/dev/flaskcode/templates/flaskcode/_macros.html

A Jinja2 macro to recursively render a directory tree structure as an unordered list. It iterates through children and calls itself for nested directories.

```html
{# render dir tree in recursive list #} {% macro render_dir_tree(dir_tree, tree_id) %}

{%- for item in dir_tree.children recursive %}*   {{ item.name }} {%- if item.children -%}
    {{ loop(item.children) }}{%- endif %}
{%- endfor %}

{% endmacro %}
```

--------------------------------

### Integrate FlaskCode into a Flask App

Source: https://github.com/sujeetkv/flaskcode/blob/dev/README.md

Integrate FlaskCode as a blueprint into an existing Flask application. Configure the resource base path and register the blueprint.

```python
from flask import Flask
import flaskcode

app = Flask(__name__)
app.config.from_object(flaskcode.default_config)
app.config['FLASKCODE_RESOURCE_BASEPATH'] = '/path/to/resource/folder'
app.register_blueprint(flaskcode.blueprint, url_prefix='/flaskcode')

@app.route('/')
def hello():
    return "Hello World!"

if __name__ == '__main__':
    app.run()
```

--------------------------------

### Enable Bracket Pair Highlighting

Source: https://github.com/sujeetkv/flaskcode/blob/dev/flaskcode/static/vendor/monaco-editor/CHANGELOG.md

Enable bracket pair colorization when creating a new Monaco editor instance. This feature helps visually distinguish matching brackets.

```javascript
var editor = monaco.editor.create(document.getElementById('container'), {
	model: model,
	language: 'javascript',
	'bracketPairColorization.enabled': true
});
```

--------------------------------

### Flaskcode Editor Configuration

Source: https://github.com/sujeetkv/flaskcode/blob/dev/flaskcode/templates/flaskcode/index.html

Sets base URLs for plugins, resource updates, and resource data, along with the editor theme using JavaScript.

```javascript
flaskcode.config.set('pluginsBaseUrl', "{{ url_for('flaskcode.static', filename='vendor') }}");
flaskcode.config.set('updateResourceBaseUrl', "{{ url_for('flaskcode.update_resource_data', file_path='') }}");
flaskcode.config.set('resourceUrlTemplate', "{{ url_for('flaskcode.resource_data', file_path='__pathname__') }}");
flaskcode.config.set('editorTheme', "{{ editor_theme }}");
```
Tokens:
Raw