lovasoa / SQLpage

Fast SQL-only data application builder. Automatically build a UI on top of SQL queries.
https://sql.datapage.app
MIT License
1.56k stars 89 forks source link

Syntax highlighting in md code block doesn't work #245

Closed pettersillander closed 7 months ago

pettersillander commented 7 months ago

Introduction

Syntax highlighting in markdown code block doesn't work. Code block is shown on the page but without highlighting.

To Reproduce

select 'text' as component,
'
## Code
  ```sql
SELECT ''list'' AS component;
SELECT name as title FROM users;

' as contents_md;


### Actual behavior

Copy/pasted example from [docs](https://sql.ophir.dev/documentation.sql?component=text#component). Actual result seen in screenshot.

### Screenshots
<img width="1055" alt="sc_code_block" src="https://github.com/lovasoa/SQLpage/assets/39410407/55b15edd-35f2-4258-8c46-0db39c633497">

### Expected behavior
Code block syntax highlighted as seen on component's doc page. See block here.
```sql
SELECT 'list' AS component;
SELECT name as title FROM users;

Version information

lovasoa commented 7 months ago

Hello ! SQLPage does not contain a syntax highighter by default, but you can easily include a syntax highlighter of your choice in your pages. See how it's done on the official site: https://sql.ophir.dev/documentation.sql?component=shell#component

select 
    'shell'                   as component,
    'https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-core.min.js' as javascript,
    'https://cdn.jsdelivr.net/npm/prismjs@1/plugins/autoloader/prism-autoloader.min.js' as javascript,
    '/prism-tabler-theme.css' as css

https://github.com/lovasoa/SQLpage/blob/main/examples/official-site/prism-tabler-theme.css

(the custom css is optional, but I think it looks good with the tabler theme)

pettersillander commented 7 months ago

Ok, makes sense. So this is not bug then.