Please add <code> tags or similar to the editor to add code!

User avatar
ludera
Ssr. Bludit
Posts: 19
Joined: Wed Apr 01, 2020 6:22 pm

For blogs that need to insert code pieces, I'm using Gist in GitHub, but It looks terrible. To insert it you need to open the source code and paste it there, which is ok... but then, it doesn't show up in the editor, so I accidentaly keep deleting pieces of code I added.

I'd love to see a button in the editor to add "code" somehow. Or a plugin that adds that capability. Is there any?

Thanks


[EDIT]
Summary of what you have to do to add code snippets to Bludit:
  • Make sure you upload the plugin folder with the name bl-plugins/prism/ so that plugin.php is inside that folder
  • Go to your dashboard -> Plugins -> Activate Prism
  • Enable TinyMCE editor on the plugins list.
  • Add the word "codesample" again to the Plugins field too.
Last edited by ludera on Tue Jul 28, 2020 10:38 am, edited 2 times in total.
User avatar
Edi
Site Admin
Posts: 3121
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Has thanked: 54 times
Been thanked: 77 times
Contact:

Which editor do you use?
Clickwork - Websites mit Bludit | Planet Bludit - Tipps und Snippets
User avatar
ludera
Ssr. Bludit
Posts: 19
Joined: Wed Apr 01, 2020 6:22 pm

Edi wrote: Wed Jun 24, 2020 10:34 pm Which editor do you use?
I'm using TinyMCE. I tried the other one but had less features than this one. At least in this one I can see the source code and add stuff there.

I just need a <code></code> around text . Or better, a <pre><code></code></pre> around text that is code and it changes style. That's enough for me.
User avatar
Edi
Site Admin
Posts: 3121
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Has thanked: 54 times
Been thanked: 77 times
Contact:

In this case you also can activate the plugin Code Sample of the editor TinyMCE.

Go to the settings of the plugin TinyMCE, then add the word codesample
  1. to the field Toolbar top or Toolbar bottom,
  2. to the field Plugins.
There is more information about the plugin at

https://www.tiny.cloud/docs-4x/plugins/codesample/
Clickwork - Websites mit Bludit | Planet Bludit - Tipps und Snippets
User avatar
ludera
Ssr. Bludit
Posts: 19
Joined: Wed Apr 01, 2020 6:22 pm

I forgot to answer. It's really easy to use, sorry about that. I should have checked the settings first.

I activated it and it's working fine, really helpful. The only problem I have is that the code is colored while editing correctly, but after saving, in the article itself, it is NOT.

What can be causing that?
User avatar
Torsten_Kelsch
Legend Bludit
Posts: 263
Joined: Thu Aug 27, 2015 10:24 pm
Location: Germany
Has thanked: 4 times
Been thanked: 2 times
Contact:

ludera wrote: Thu Jul 16, 2020 12:17 pm The only problem I have is that the code is colored while editing correctly, but after saving, in the article itself, it is NOT.

What can be causing that?
Seems like some CSS issue, maybe in the TinyMCE plugin or wherever.
On Error GoTo Bed
User avatar
Edi
Site Admin
Posts: 3121
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Has thanked: 54 times
Been thanked: 77 times
Contact:

Yes, there is some CSS missing. To use codesample in TinyMCE you also have to install Prism:

https://prismjs.com

This means you have to download the files prism.css and prism.js. These can be loaded for example in the directory /bl-content/prism.

To use them you can enter the following in the plugin HTML Code:
  • in the field "Head":

    Code: Select all

    <link href="/bl-content/prism/prism.css" rel="stylesheet">
  • in the field "Footer":

    Code: Select all

    <script src="/bl-content/prism/prism.js"></script>
Would be an idea for a plugin.
Clickwork - Websites mit Bludit | Planet Bludit - Tipps und Snippets
User avatar
ludera
Ssr. Bludit
Posts: 19
Joined: Wed Apr 01, 2020 6:22 pm

Hi. Thanks. I've been trying this, I uploaded the custom files I need for Prism.
But when you say : Add this code to the HTML of the plugin what do you mean?

There is only a plugin.php. Do you mean the html generated in the "adminHead()" function? The adminBodyEnd() doesn't generate any HTML instead.

Or do you talk about other place? You mention Plugin settings, but you can't add code there, I think, only those given words that activate features or disable them.

(I've developed websites, so I'm not that lost... )

Thanks
User avatar
Edi
Site Admin
Posts: 3121
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Has thanked: 54 times
Been thanked: 77 times
Contact:

I mean the plugin HTML Code that comes with Bludit.
Clickwork - Websites mit Bludit | Planet Bludit - Tipps und Snippets
User avatar
Edi
Site Admin
Posts: 3121
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Has thanked: 54 times
Been thanked: 77 times
Contact:

Clickwork - Websites mit Bludit | Planet Bludit - Tipps und Snippets
Post Reply