Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Code Block Syntax Highlighting #80

Merged
merged 6 commits into from
Dec 28, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions Blazored.TextEditor.sln
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@

Microsoft Visual Studio Solution File, Format Version 12.00
# Visual Studio Version 16
VisualStudioVersion = 16.0.29519.87
# Visual Studio Version 17
VisualStudioVersion = 17.12.35527.113
MinimumVisualStudioVersion = 10.0.40219.1
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Blazored.TextEditor", "src\Blazored.TextEditor\Blazored.TextEditor.csproj", "{A76F9184-D5C2-42AE-9BFA-BDF33A3B1434}"
EndProject
Expand All @@ -13,10 +13,11 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "samples", "samples", "{666C
EndProject
Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Items", "Solution Items", "{5DCD4124-DAD2-4777-92CB-16ABA93847C1}"
ProjectSection(SolutionItems) = preProject
DeltaExample.png = DeltaExample.png
HTMLExample.png = HTMLExample.png
InlineEditingExample.png = InlineEditingExample.png
docs\images\DeltaExample.png = docs\images\DeltaExample.png
docs\images\HTMLExample.png = docs\images\HTMLExample.png
docs\images\InlineEditingExample.png = docs\images\InlineEditingExample.png
README.md = README.md
docs\images\SyntaxHighlighterExample.png = docs\images\SyntaxHighlighterExample.png
EndProjectSection
EndProject
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "TextEditorDemo", "samples\TextEditorDemo\TextEditorDemo.csproj", "{91541C38-9A34-4AC1-B5F8-BD80DBC5012F}"
Expand Down
62 changes: 51 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,26 +1,37 @@
# Blazored TextEditor
Rich Text Editor for Blazor applications - Uses [Quill JS](https://quilljs.com/ "Quill JS.com")

![Screenshot](HTMLExample.png)
<!-- ![Blazored Icon](https://avatars.githubusercontent.com/u/39194025?s=200&v=4 "Blazored Icon") -->

### Sample Applications
[![Blazor](https://img.shields.io/badge/blazor-5C2D91.svg?style=for-the-badge&logo=blazor&logoColor=white)](https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor) [![C#](https://img.shields.io/badge/c%23-239120.svg?style=for-the-badge&logo=c-sharp&logoColor=white)](https://learn.microsoft.com/en-us/dotnet/csharp/)

[![Build & Test Main](https://github.com/Blazored/TextEditor/actions/workflows/ci-main.yml/badge.svg)](https://github.com/Blazored/TextEditor/actions/workflows/ci-main.yml)
[![Build & Test PR](https://github.com/Blazored/TextEditor/actions/workflows/ci-pr.yml/badge.svg)](https://github.com/Blazored/TextEditor/actions/workflows/ci-pr.yml)
[![CodeQL](https://github.com/Blazored/TextEditor/actions/workflows/codeql-analysis.yml/badge.svg)](https://github.com/Blazored/TextEditor/actions/workflows/codeql-analysis.yml)
[![Release Drafter](https://github.com/Blazored/TextEditor/actions/workflows/release-drafter.yml/badge.svg)](https://github.com/Blazored/TextEditor/actions/workflows/release-drafter.yml)

> Rich Text Editor for Blazor applications - Uses [Quill JS](https://quilljs.com/ "Quill JS.com")

![HTML Example](docs/images/HTMLExample.png "HTML Example]")

## Sample Applications

* [Simple blogging application written in Microsoft Server Side Blazor](https://github.com/ADefWebserver/Blazor-Blogs "Blazor Blogs") - [Contains an example of uploading images]

### Helpful Articles
## Helpful Articles

* [Creating Reusable Custom Blazor Controls](https://blazorhelpwebsite.com/ViewBlogPost/11 "BlazorHelpWebsite.com")
* [Creating A Rich Text Editor In Blazor Using Quill](https://blazorhelpwebsite.com/ViewBlogPost/12 "BlazorHelpWebsite.com")

### Installing
## Installing

You can install from NuGet using the following command:

`Install-Package Blazored.TextEditor`

Or via the Visual Studio package manger.

### Setup
## Setup

Blazor Server applications will need to include the following CSS and JS files in their `Pages\_Host.cshtml` (or `Pages/_Layout.cshtml` if using .Net 6).

In the `head` tag add the following CSS.
Expand Down Expand Up @@ -61,6 +72,7 @@ Below is a list of all the options available on the Text Editor.
- `Placeholder` (Optional - Default: `Compose an epic...`) - The text to show when editor is empty.
- `Theme` (Optional - Default: `snow`) - Use `snow` to show the Toolbar on top of the editor, and `bubble` for inline editing.
- `DebugLevel` (Optional - Default: `info`) - Determines the level of debug information returned to the web browser console window. Options are `error`, `warn`, `log`, or `info`.
- `Syntax` (Optional - Default: `false`) - The Syntax Module enhances the Code Block format by automatically detecting and applying syntax highlighting.

**Methods**

Expand All @@ -72,9 +84,13 @@ Below is a list of all the options available on the Text Editor.
- `InsertImage` (`string`) - Inserts an image at the current point in the editor.
- `InsertText` (`string`) - Inserts text at the current point in the editor.

## Basic Example

(see code in the [`Index.razor` page](https://github.com/Blazored/TextEditor/blob/main/samples/BlazorServerSide/Pages/Index.razor) in the repo for more examples)

<details>
<summary>Code</summary>

### Basic Example
(see code in the [Index.razor page](https://github.com/Blazored/TextEditor/blob/main/samples/BlazorServerSide/Pages/Index.razor) in the repo for more examples)
```cs
@using Blazored.TextEditor

Expand Down Expand Up @@ -148,8 +164,15 @@ string QuillHTMLContent;
}
```

</details>

### Alternative Using of the BlazoredTextEditor Component
Depending on our use case, we may want to add some styling to the Toolbar or Editor. We can also place the Toolbar below the Editor by setting the BottomToolbar property to ‘true’ in the BlazoredTextEditor component:

Depending on our use case, we may want to add some styling to the _Toolbar_ or _Editor_. We can also place the _Toolbar_ below the _Editor_ by setting the `BottomToolbar` property to `"true"` in the **BlazoredTextEditor** component:

<details>
<summary>Code</summary>

```csharp
<style>
.rounded {
Expand Down Expand Up @@ -260,11 +283,28 @@ Depending on our use case, we may want to add some styling to the Toolbar or Edi
}
}
```

</details>

## Screenshots

![examples_screenshot.png](samples%2FTextEditorDemo%2Fwwwroot%2Fexamples_screenshot.png)

### Rich Text Screenshot
![Screenshot](DeltaExample.png)

![Delta Example](docs/images/DeltaExample.png "Delta Example")

### Read Only Screenshot
![Screenshot](InlineEditingExample.png)

![Inline Editing Example](docs/images/InlineEditingExample.png "Inline Editing Example")

## Adding Syntax Highlighting

See [Syntax Highlighter Example](docs/SyntaxHighlighterExample.md) docs for more information.

![Syntax Highlighter Example](docs/images/SyntaxHighlighterExample.png "Syntax Highlighter Example")

---

# Blazored TextEditor Forks

Expand Down
7 changes: 7 additions & 0 deletions docs/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
# Docs

- [Syntax Highlighter](SyntaxHighlighterExample.md)

## Images

- [Images](images/README.md)
50 changes: 50 additions & 0 deletions docs/SyntaxHighlighterExample.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
# Syntax Highlighter Example

See [Syntax Highlighter Module](https://quilljs.com/docs/modules/syntax) from the _QuillJS_ docs for more information.

![Syntax Highlighter Example](images/SyntaxHighlighterExample.png "Syntax Highlighter Example")

To turn on _Syntax Highlighting_ in your **Blazored Text Editor** just pass the property `Syntax="true"` and add the necessary library files (css/js).

Then add the `ql-code-block` to your _Toolbar_.

```html
<BlazoredTextEditor Syntax="true">
<ToolbarContent>
...
<span class="ql-formats">
<button class="ql-code-block"></button>
</span>
</ToolbarContent>
<EditorContent>
...
</EditorContent>
</BlazoredTextEditor>
```

## Blazor WASM

Add to the `index.html` both CSS and JS for a syntax highlighter, for these examples I've chosen [highlight.js](https://highlightjs.org/).

```html
<head>
...
<!-- Include your favorite highlight.js stylesheet -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css" rel="stylesheet">
...
</head>
```

Make sure to add the `js` before your Quill js library or you will get an error.

```html
<body>
<!-- Include the highlight.js library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<!-- Quill library -->
</body>
```

## Blazor Server

Repeat the above but instead of the `index.html` you will want to add / update your `_Host.cshtml`.
File renamed without changes
File renamed without changes
File renamed without changes
17 changes: 17 additions & 0 deletions docs/images/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
# Images

## HTML Example

![HTML Example](HTMLExample.png "HTML Example")

## Delta Example

![Delta Example](DeltaExample.png "Delta Example")

## Inline Editing Example

![Inline Editing Example](InlineEditingExample.png "Inline Editing Example")

## Syntax Highlighter Example

![Syntax Highlighter Example](SyntaxHighlighterExample.png "Syntax Highlighter Example")
Binary file added docs/images/SyntaxHighlighterExample.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 0 additions & 16 deletions samples/BlazorClientSide/Pages/Counter.razor

This file was deleted.

54 changes: 54 additions & 0 deletions samples/BlazorClientSide/Pages/Index.razor
Original file line number Diff line number Diff line change
Expand Up @@ -160,15 +160,63 @@
Toggle Editor
</button>

<hr />

<!-- ----- ----- ----- ----- ----- -->
<!-- Syntax Highlighter Module -->
<!-- ----- ----- ----- ----- ----- -->
<h2>Syntax Highlighter</h2>
<p>Off</p>
<BlazoredTextEditor>
<ToolbarContent>
<span class="ql-formats">
<button class="ql-code-block"></button>
</span>
</ToolbarContent>
<EditorContent>
<pre class="ql-syntax" spellcheck="false">
const <span class="hljs-keyword">language</span> <span class="hljs-operator">=</span> "JavaScript";
console.<span class="hljs-built_in">log</span>("I love " <span class="hljs-operator">+</span> <span class="hljs-keyword">language</span> <span class="hljs-operator">+</span> "!");</pre>
</EditorContent>
</BlazoredTextEditor>

<p>On</p>
<BlazoredTextEditor @ref="@QuillCode" Syntax="true">
<ToolbarContent>
<span class="ql-formats">
<button class="ql-code-block"></button>
</span>
</ToolbarContent>
<EditorContent>
<pre class="ql-syntax" spellcheck="false">
const <span class="hljs-keyword">language</span> <span class="hljs-operator">=</span> "JavaScript";
console.<span class="hljs-built_in">log</span>("I love " <span class="hljs-operator">+</span> <span class="hljs-keyword">language</span> <span class="hljs-operator">+</span> "!");</pre>
</EditorContent>
</BlazoredTextEditor>
<br />
<button class="btn btn-primary"
@onclick="GetHTMLCode">
Get HTML
</button>
<br />
<div>
<br />
@((MarkupString)QuillHTMLCodeContent)
@QuillHTMLCodeContent
</div>
<br />

@code {
BlazoredTextEditor QuillHtml;
BlazoredTextEditor QuillNative;
BlazoredTextEditor QuillReadOnly;
BlazoredTextEditor QuillCode;

string QuillHTMLContent;
string QuillContent;
string QuillReadOnlyContent =
@"<span><b>Read Only</b> <u>Content</u></span>";
string QuillHTMLCodeContent;

bool mode = false;

Expand Down Expand Up @@ -213,4 +261,10 @@
mode = (mode) ? false : true;
await this.QuillReadOnly.EnableEditor(mode);
}

public async void GetHTMLCode()
{
QuillHTMLCodeContent = await this.QuillCode.GetHTML();
StateHasChanged();
}
}
5 changes: 0 additions & 5 deletions samples/BlazorClientSide/Shared/NavMenu.razor
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,6 @@
<span class="oi oi-home" aria-hidden="true"></span> Home
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="counter">
<span class="oi oi-plus" aria-hidden="true"></span> Counter
</NavLink>
</li>
</ul>
</div>

Expand Down
5 changes: 5 additions & 0 deletions samples/BlazorClientSide/wwwroot/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<link href="//cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet">

<!-- Include your favorite highlight.js stylesheet -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css" rel="stylesheet">

<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/site.css" rel="stylesheet" />
</head>
Expand All @@ -18,6 +21,8 @@

<script src="_framework/blazor.webassembly.js"></script>

<!-- Include the highlight.js library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<!-- Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script src="_content/Blazored.TextEditor/quill-blot-formatter.min.js"></script>
Expand Down
16 changes: 0 additions & 16 deletions samples/BlazorServerSide/Pages/Counter.razor

This file was deleted.

Loading
Loading