Skip to content
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
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,14 @@ import hljs_javascript from 'highlight.js/lib/languages/javascript';
import hljs_php from 'highlight.js/lib/languages/php';
import hljs_xml from 'highlight.js/lib/languages/xml';
import hljs_twig from 'highlight.js/lib/languages/twig';
import hljs_yaml from 'highlight.js/lib/languages/yaml';
import hljs_diff from 'highlight.js/lib/languages/diff';

hljs.registerLanguage('javascript', hljs_javascript);
hljs.registerLanguage('php', hljs_php);
hljs.registerLanguage('twig', hljs_twig);
hljs.registerLanguage('yaml', hljs_yaml);
hljs.registerLanguage('diff', hljs_diff);
// xml is the language used for HTML
hljs.registerLanguage('xml', hljs_xml);

Expand Down
3 changes: 2 additions & 1 deletion ux.symfony.com/config/services.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@ services:
# add more service definitions when explicit configuration is needed
# please note that last definitions always *replace* previous ones

Highlight\Highlighter: ~
App\Service\CommonMark\CodeExtension:
tags: ['twig.markdown.league_extension']

League\CommonMark\Extension\ExternalLink\ExternalLinkExtension:
tags: ['twig.markdown.league_extension']
6 changes: 6 additions & 0 deletions ux.symfony.com/importmap.php
Original file line number Diff line number Diff line change
Expand Up @@ -207,4 +207,10 @@
'@kurkle/color' => [
'version' => '0.3.2',
],
'highlight.js/lib/languages/yaml' => [
'version' => '11.9.0',
],
'highlight.js/lib/languages/diff' => [
'version' => '11.9.0',
],
];
27 changes: 27 additions & 0 deletions ux.symfony.com/src/Service/CommonMark/CodeExtension.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<?php

/*
* This file is part of the Symfony package.
*
* (c) Fabien Potencier <[email protected]>
*
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/

namespace App\Service\CommonMark;

use League\CommonMark\Environment\EnvironmentBuilderInterface;
use League\CommonMark\Extension\CommonMark\Node\Block\FencedCode;
use League\CommonMark\Extension\ExtensionInterface;

/**
* @author Kevin Bond <[email protected]>
*/
final class CodeExtension implements ExtensionInterface
{
public function register(EnvironmentBuilderInterface $environment): void
{
$environment->addRenderer(FencedCode::class, new CodeRenderer(), 10);
}
}
51 changes: 51 additions & 0 deletions ux.symfony.com/src/Service/CommonMark/CodeRenderer.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<?php

/*
* This file is part of the Symfony package.
*
* (c) Fabien Potencier <[email protected]>
*
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/

namespace App\Service\CommonMark;

use League\CommonMark\Extension\CommonMark\Node\Block\FencedCode;
use League\CommonMark\Node\Node;
use League\CommonMark\Renderer\ChildNodeRendererInterface;
use League\CommonMark\Renderer\NodeRendererInterface;
use League\CommonMark\Util\HtmlElement;
use League\CommonMark\Util\Xml;

/**
* @author Kevin Bond <[email protected]>
*/
final class CodeRenderer implements NodeRendererInterface
{
/**
* @param FencedCode $node
*/
public function render(Node $node, ChildNodeRendererInterface $childRenderer): string|\Stringable|null
{
$codeAttr = ['data-code-highlighter-target' => 'codeBlock'];

if ($lang = $node->getInfo()) {
$codeAttr['class'] = 'language-'.$lang;
}

return new HtmlElement(
'div',
['class' => 'Terminal_body mb-3'],
new HtmlElement(
'div',
['class' => 'Terminal_content'],
new HtmlElement(
'pre',
['data-controller' => 'code-highlighter'],
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would be nice to have a copy button in here but I'll save for a followup PR 😁

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like the idea

new HtmlElement('code', $codeAttr, Xml::escape($node->getLiteral()))
)
)
);
}
}
32 changes: 24 additions & 8 deletions ux.symfony.com/templates/ux_packages/translator.html.twig
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,9 @@
<div class="row mb-4">
<div class="col-5">
<div class="Terminal_body">
<pre data-translator-demo-target="helloCode"></pre>
<div class="Terminal_content">
<pre data-translator-demo-target="helloCode"></pre>
</div>
</div>
</div>
<div class="col">
Expand All @@ -65,7 +67,9 @@
<div class="row mb-4">
<div class="col-5">
<div class="Terminal_body">
<pre data-translator-demo-target="sayHelloCode"></pre>
<div class="Terminal_content">
<pre data-translator-demo-target="sayHelloCode"></pre>
</div>
</div>
</div>
<div class="col">
Expand All @@ -91,7 +95,9 @@
<div class="row mb-4">
<div class="col-5">
<div class="Terminal_body">
<pre data-translator-demo-target="invitationTitleCode"></pre>
<div class="Terminal_content">
<pre data-translator-demo-target="invitationTitleCode"></pre>
</div>
</div>
</div>
<div class="col">
Expand Down Expand Up @@ -134,7 +140,9 @@
<div class="row mb-4">
<div class="col-5">
<div class="Terminal_body">
<pre data-translator-demo-target="numOfApplesCode"></pre>
<div class="Terminal_content">
<pre data-translator-demo-target="numOfApplesCode"></pre>
</div>
</div>
</div>
<div class="col">
Expand Down Expand Up @@ -162,7 +170,9 @@
<div class="row mb-4">
<div class="col-5">
<div class="Terminal_body">
<pre data-translator-demo-target="finishPlaceCode"></pre>
<div class="Terminal_content">
<pre data-translator-demo-target="finishPlaceCode"></pre>
</div>
</div>
</div>
<div class="col">
Expand All @@ -189,7 +199,9 @@
<div class="row mb-4">
<div class="col-5">
<div class="Terminal_body">
<pre data-translator-demo-target="publishedAtCode"></pre>
<div class="Terminal_content">
<pre data-translator-demo-target="publishedAtCode"></pre>
</div>
</div>
</div>
<div class="col">
Expand All @@ -215,7 +227,9 @@
<div class="row mb-4">
<div class="col-5">
<div class="Terminal_body">
<pre data-translator-demo-target="progressAtCode"></pre>
<div class="Terminal_content">
<pre data-translator-demo-target="progressAtCode"></pre>
</div>
</div>
</div>
<div class="col">
Expand All @@ -240,7 +254,9 @@
<div class="row">
<div class="col-5">
<div class="Terminal_body">
<pre data-translator-demo-target="valueOfObjectCode"></pre>
<div class="Terminal_content">
<pre data-translator-demo-target="valueOfObjectCode"></pre>
</div>
</div>
</div>
<div class="col">
Expand Down