Light
Dark
System
Ask  Question

Code Viewer (JSON) - Metronic 8 - Vue (latest version)

Hi, we are searching something as:

https://preview.keenthemes.com/metronic8/vue/demo1/?_ga=2.110975814.2136720187.1662632648-1362765973.1651486174#/builder

Where can we find the addon to create this? Should be perfect to give a JSON object in a function and it creates a code viewer.
user
N. 8 months ago
Vue
3 Answers
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)

user
N. 8 months ago
Can't edit the question. Gives an error. It would be better if you create levels in it so you can open and close specific level. Also you need a formatter in it (to beautify it). Can you guys create this as addon with a new update?
user
Lauris Stepanovs Author8 months ago
We don't get any errors, when trying to format your question, it might be a temporary error on our server, could you please retry it?

Thanks for suggtion! We will consider adding more formatting options in upcoming future.
user
Lauris Stepanovs Author8 months ago
Hi,

You can check a source code of this page inside file src/views/LayoutBuilder.vue.

We preview our JSON object using component src/components/highlighters/CodeHighlighter.vue, it have two props lang and fieldHeight.

lang - language you want to preview, for example javascript, html, css e.t.c.
fieldHeight - optional prop, provide it if you want to limit previewer height

In slot you can pass a code that you want to display.

Regards,
Lauris Stepanovs,
Keenthemes Support Team
user
Lauris Stepanovs Author8 months ago
Deleted comment
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Metronic

Go to MetronicDownloadsPurchase MetronicRefunds

React Dev Vacancy

KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply
keenthemes mega bundle