Skip to content

Readme.md

Latest commit

 

History

History
100 lines (85 loc) · 3.75 KB

Readme.md

File metadata and controls

100 lines (85 loc) · 3.75 KB

Trumbowyg code snippet

Adds prettified code snippet inserting functionality to Trumbowyg editor by using a slightly modified version of Trumbowyg highlight plugin. You need to add the highlight button to your Trumbowyg editor options to enable it.

{
    btns: [
        ['highlight']
    ],
}

Prism is used to prettify the code. Currently the following formats are supported:

  • clike
  • cpp
  • cs
  • csharp
  • css
  • dotnet
  • graphql
  • html
  • js
  • json
  • markup-templating
  • mathml
  • md
  • plsql
  • powershell
  • scss
  • sql
  • ssml
  • svg
  • ts
  • xml
  • yaml
  • yml

Then you need to link the Trumbowyg and Prism styles and scripts where you want it to be used. E.g. if you want to add it to BlogPost content type you can do it with the help of Lombiq.HelpfulLibraries.OrchardCore in a IResourceFilterProvider:

using Lombiq.HelpfulLibraries.OrchardCore.ResourceManagement;
using static Lombiq.HelpfulExtensions.Extensions.Trumbowyg.Constants.PrismLanguageNames;
using static Lombiq.HelpfulExtensions.Extensions.Trumbowyg.Constants.ResourceNames;

public class ResourceFilters : IResourceFilterProvider
{
    public void AddResourceFilter(ResourceFilterBuilder builder)
    {
        const string MyContentType = "MyContentType";

        var resourceFilters = new[]
            {
                builder.WhenContentType(MyContentType),
                builder.WhenContentTypeEditor(MyContentType),
                builder.WhenContentTypeCreate(MyContentType),
                builder.WhenContentTypePreview(MyContentType),
            };

        foreach (var resourceFilter in resourceFilters)
        {
            resourceFilter.RegisterStylesheet(Prism, PrismLineHighlight, TrumbowygHighlight);
            resourceFilter.RegisterFootScript(Prism, PrismLineHighlight, TrumbowygHighlight, TrumbowygHighlightExtension);
            foreach (var language in AllLanguage)
            {
                resourceFilter.RegisterFootScript(language);
            }
        }
    }
}

This will add the required styles and scripts to the editor and display views of the specified content type. Make sure to replace MyContentType with the actual content type name where you want to use this feature. The following languages will be included beyond the base Prism languages:

  • C#
  • Docker
  • Json
  • Markdown
  • Sql
  • Liquid
  • Regex
  • Powershell

You can add a new language by registering its script resource in a Resource Filter. Note that it might have dependencies you need to include, which you can find by inspecting the script, or checking which language gets automatically selected when you select your desired language in the Prism JS download list.

_manifest
.DefineScript("LiquidLanguage")
.SetUrl(
    Vendors + $"prismjs/components/prism-liquid.min.js",
    Vendors + $"prismjs/components/prism-liquid.js")
.SetDependencies("markup-templating");

You can use any other Prism theme by registering their corresponding stylesheet, e.g. Lombiq.HelpfulExtensions.Extensions.Trumbowyg.Constants.ResourceNames.PrismCoyTheme for the Coy theme.

Tip

If you want to add this to the BlogPost content type, then just enable the "Lombiq Helpful Extensions - Trumbowyg code snippet - Blog Posts" feature, since it configures all of the above. Note though, that the BlogPost content type provided by Orchard Core's Blog recipe doesn't have a part or field that uses Trumbowyg, so you'll need to add one (e.g. an Html Field, or Html Body Part) first.