Everyone
I am making blogging site using quill.js. To view post in frontside I am using highlite.js.
In following image first 2 block are displayed with default side just <pre> tag.
and last one with <pre><code class="dart">{code}</code></pre>
My question is
I don't want to add manually html with <code class="dart">
I want automatic set styling by using just tag
I read all document but not found any specific answer how to set?
please any one?
I found answer. Using custom selector.
document.querySelectorAll('pre').forEach((block) => {
hljs.highlightBlock(block);
});
Related
I want to automatically load up adverts inside the body of my blog website
For Example:
<div class="dynamic-ads-div"></div>
After loading up ckeditor 5, i want to replace the above element with an advert code from platforms like ezoic, google, etc. I have tried to put the code directly in the blog post body, but ckeditor keeps filtering, after rigorous research, i could only preserve the custom html elements like <ins>, but any form of script tags are filtered out, i want to use the approach of loading up ckeditor before adding the advert code dynamically, I tried editor:
document.querySelectorAll(".dynamic-ads-div").forEach(ads => { ads.innerHTML = '<script src="LINK_TO_ADS_PLATFORM"></script><custom-element></custom-element><script>INIT_ADS_CODE</script>' }).
Ckeditor completely ignores the above code.
Any form of help will be greatly appreciated; If you can help me preserve the script tags, or help me insert content dynamically after loading up ckeditor.
Thanks
Is there a way to add a tag to the format dropdown that would wrap the text in <small></small> tags?
Editing config.js as follows causes a runtime error:
config.format_tags = 'small;p;h1;h2;h3;pre';
probably because <small> is not block level?
The reason of the runtime error is, that js can not find CKEDITOR.config.format_small.
You have to do two things:
Search for CKEDITOR.config.format_h6 in ckeditor.js and add CKEDITOR.config.format_small={element:"small"};. Then the error is gone, but you can not see the entry yet.
open the languagefile you want (e.g. en.js) and add "tag_small":"small text".
now CKEditor supports the small tag.
This works for me, I hope it works for you too.
If I want to add a custom section tag to format tags, this work for me:
1. Go to config.js, add
config.format_tags = 'h1;h2;h3;h4;h5;h6;section';
config.format_section = { element : 'section' };
2. Then open the languagefile you want (e.g. en.js) -> lang/en.js
search for "tag_pre":"Formatted", and add "tag_section":"Section".
If you're looking to wrap text in a certain tag, you can also achieve this with the Style dropdown as well.
First, configure your editor to allow styles at /admin/config/content/formats/manage/full_html. Replace full_html with whatever editor version you want to modify
Drag the Styles button to the active toolbar if it isn't already there
Add items to "Styles Dropdown" tab under CKEditor plugin settings
Each option takes the form css_selector | Human Visible Name so in your case, you'd add small.my_element_class | Super Special Small or something similar.
Instructions abbreviated from this post: https://www.axelerant.com/resources/team-blog/drupal-8-custom-styles-in-ckeditor
So I followed a tutorial setting up a Markdowndeep editor using MVC and the editor and preview work just fine. The tutorial didn't mention how to render specific text on a page using Markdowndeep though. So I did a few Google searches thinking I'd find an obvious answer but to my surprise I didn't.
Can someone show me an example on how to render a portion of text using Razor?
I figured out the syntax. It was #Html.Markdown(Model.Body)
You must have Markdown Helper installed though.
Another option is to force Razor to return the RAW Html.
If we extend the MarkDownDeep Example, we get the following:
// Instantiate
var md=new MarkdownDeep.Markdown();
// Set options
md.ExtraMode=true;
// Translate
var html=md.Transform(plaintext);
<div>#Html.Raw(html)</div>
and your markdown as HTML should be in the div!
I want to put login module in to modal popup. But when I use class="modal" whole page gets loaded in to modal. Can you show me the way to put only module.
This stands also for displaying articles in modal.
here is the link with problem
I do this fairly often and there are two tricks that can help make this work better. First you will likely want to add tmpl=component to your url. This causes Joomla to only display the article instead of the entire template (as long as your template supports this, most do).
This should do pretty well. If you want to get even more selective, you can do one of two things:
Add CSS to hide pieces
.modal-body .other-selector {
display:none;
}
Use Javascript to select only the piece that you want
$('#myModal').on('show', function () {
// selects a piece of the current modal body and sets it as the only content of the modal
$('#myModal .modal-body').html($('#myModal .modal-body').find('.other-selector).html());
})
The way you can only display the component is to add an extra parameter tmpl=component in the url.If you'll see the component.php inside your template folder that has mainly <jdoc:include type="component" /> with no module position.So it'll load only component.
I did not try for module but you can try similar for module.So you can try it by just giving the position of the module in whole template like create a new page called modules.php in your template folder and put the module position inside this page.And you call it in a similar way just like component like tmpl=modules
I hope this will work.
It was problem with my templates component.php file. I just added inside and now it works fine. Thanks guys
I’m trying to display the menu title text (example “Home”) in the header area of my Joomla 2.5 website.
Joomla’s default (when activated) is to place it in the Component area.
I’m not sure the best way to accomplish this. By default Joomla wraps the menu title with an H1 tag but doesn’t wrap it with a div and class.
The ways I’ve thought might be best to do this are:
Somehow wrap all menu titles with a div and class so I could reposition them up into the header with css .
Add some php code to my template. Something like:
php
$menuTitle = $this->params->get(‘fieldNameOfMenuTitle’);
php
echo = $menuTitle;
Any ideas, suggestions, or answers would greatly appreciated
Thanks
Never found an exact answer but found a work around.
Used a modified version of the below demo/plug-in to create a custom field (named it: "Title that displays on the Web Page") in the articles menu. By default, the table that is created and displayed in the web page is in the component area and is wrapped in a w/ a class. Repositioned the with CSS up into the header/banner area.
http://docs.joomla.org/Adding_custom_fields_to_the_article_component