Giter Club home page Giter Club logo

torchlight-commonmark-php's Introduction

Laravel Torchlight Extension for Commonmark

Tests Latest Stable Version Total Downloads License

๐Ÿ“š The full docs can be found at torchlight.dev/docs/clients/commonmark-php.

A Torchlight syntax highlighting extension for the PHP League's Commonmark Markdown Parser in a Laravel application.

Supports both CommonMark version 1 and version 2.

Torchlight is a VS Code-compatible syntax highlighter that requires no JavaScript, supports every language, every VS Code theme, line highlighting, git diffing, and more.

Installation

To install, require the package from composer:

composer require torchlight/torchlight-commonmark

This will install the Laravel Client as well.

Adding the Extension

If you are using Graham Campbell's Laravel Markdown package, you can add the extension in your markdown.php file, under the "extensions" key.

'extensions' => [
    // Torchlight syntax highlighting
    TorchlightExtension::class,
],

If you aren't using the Laravel Markdown package, you can add the extension manually:

// CommonMark V1
$environment = Environment::createCommonMarkEnvironment();
$environment->addExtension(new TorchlightExtension);

// CommonMark V2
$environment = new Environment();
$environment->addExtension(new CommonMarkCoreExtension);
$environment->addExtension(new TorchlightExtension);

That's all you need to do! All of your code fences will now be highlighted via Torchlight.

Configuration

Once the package is downloaded, you can run the following command to publish your configuration file:

php artisan torchlight:install

Once run, you should see a new file torchlight.php in you config folder, with contents that look like this:

<?php
return [
    // The Torchlight client caches highlighted code blocks. Here
    // you can define which cache driver you'd like to use.
    'cache' => env('TORCHLIGHT_CACHE_DRIVER'),

    // Which theme you want to use. You can find all of the themes at
    // https://torchlight.dev/themes, or you can provide your own.
    'theme' => env('TORCHLIGHT_THEME', 'material-theme-palenight'),

    // Your API token from torchlight.dev.
    'token' => env('TORCHLIGHT_TOKEN'),

    // If you want to register the blade directives, set this to true.
    'blade_components' => true,

    // The Host of the API.
    'host' => env('TORCHLIGHT_HOST', 'https://api.torchlight.dev'),
];

Cache

Set the cache driver that Torchlight will use.

Theme

You can change the theme of all your code blocks by adjusting the theme key in your configuration.

Token

This is your API token from torchlight.dev. (Torchlight is completely free for personal and open source projects.)

Blade Components

By default Torchlight works by using a custom Laravel component. If you'd like to disable the registration of the component for whatever reason, you can turn this to false.

Host

You can change the host where your API requests are sent. Not sure why you'd ever want to do that, but you can!

torchlight-commonmark-php's People

Contributors

aarondfrancis avatar duncanmcclean avatar midnite81 avatar stylecibot avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

torchlight-commonmark-php's Issues

Trying to access array offset on value of type null

I haven't had much time to dig into this issue, but filing this now before I do ๐Ÿ‘

When attempting to render content with Markdown::convertToHtml($this->body) (using the https://github.com/GrahamCampbell/Laravel-Markdown package).

Trying to access array offset on value of type null

Stacktrace shows the error happening here:

protected function getLanguage($node)
{
    $language = $this->getInfo($node)[0]; // here

    return $language ? Xml::escape($language, true) : null;
}

With the following content in its entirety (this is user generated content that should have backticks around the code blocks).

ok I'm stumped on this error - anyone have any ideas? I'm on lesson 20. files.js:

import axios from 'axios'

export default {
    namespaced: true,
    state: {
        files: []
    },
    mutations: {
        SET_FILES(state, files) {
            state.files = files
        },

        ADD_FILE(state, file) {
            state.files = [file, ...state.files]
        }        
    },
    getters: {
        files(state) {
            return state.files
        }
    },
    actions: {
        async getFiles({ commit }) {
            let response = await axios.get('/api/files')

            commit('SET_FILES', response.data)
        }
    },
  }

Upload.vue

import { mapActions, mapGetters, mapMutations } from "vuex"
import AppFiles from '../components/AppFiles.vue'
import AppUploader from '../components/AppUploader.vue'
import axios from 'axios'
export default {
	components: {
		AppFiles,
		AppUploader
	},	
	computed: {
		...mapGetters({
			files: 'files/files'
		})
	},

	methods: {
		...mapActions({
			getFiles: 'files/getFiles'
		}),

		...mapMutations({
			addFile: 'files/ADD_FILE'
		}),
		async storeFile(file) {
			let response = await axios.post('/api/files', {
				name: file.filename,
				size: file.fileSize,
				path: file.serverId
			})		

			this.addFile(response.data.data)
		}
	},
	mounted() {
		this.getFiles()
	}
};

error:

nonIterableSpread.js?3427:2 Uncaught (in promise) TypeError: Invalid attempt to spread non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.
    at _nonIterableSpread (nonIterableSpread.js?3427:2)
    at _toConsumableArray (toConsumableArray.js?2909:6)
    at Store.ADD_FILE (files.js?d979:14)
    at wrappedMutationHandler (vuex.esm-browser.js?5502:808)
    at commitIterator (vuex.esm-browser.js?5502:438)
    at Array.forEach (<anonymous>)
    at eval (vuex.esm-browser.js?5502:437)
    at Store._withCommit (vuex.esm-browser.js?5502:596)
    at Store.commit (vuex.esm-browser.js?5502:436)
    at Store.boundCommit [as commit] (vuex.esm-browser.js?5502:376)

I'm currently handling this using the rescue helper in Laravel, to default to the unmarkdown'd value.

'body_markdown' => rescue(fn () => Markdown::convertToHtml($this->body), $this->body),

I'll do some digging with this specific case and PR if needed.

Torchlight syntax highlighting doesn't work on spatie's laravel-markdown

I have added the extension in my markdown.php file, under the "extensions" key.

'extensions' => [
    // Torchlight syntax highlighting
    TorchlightExtension::class,
],

Then, if I render this code block with <x-markdown> it doesn't work.

<x-markdown>
     ```php
     echo "This is php!";
     ```
</x-markdown>

Can't install torchlight/torchlight-commonmark within a fresh laravel app

I created a fresh laravel 11 app yesterday. I want to try torchlight for syntax highlight. But I can't install the package. I followed the error message but still unable to resolve, that is, composer require -W 'torchlight/torchlight-commonmark:*'.

โžœ  site git:(main) composer require torchlight/torchlight-commonmark
./composer.json has been updated
Running composer update torchlight/torchlight-commonmark
Loading composer repositories with package information
Updating dependencies
Your requirements could not be resolved to an installable set of packages.

  Problem 1
    - torchlight/torchlight-commonmark v0.5.4 requires torchlight/torchlight-laravel v0.5.10 -> satisfiable by torchlight/torchlight-laravel[v0.5.10].
    - torchlight/torchlight-commonmark v0.5.5 requires torchlight/torchlight-laravel ^0.5.10 -> satisfiable by torchlight/torchlight-laravel[v0.5.10, ..., v0.5.14].
    - torchlight/torchlight-commonmark v0.5.3 requires torchlight/torchlight-laravel ^0.5.9 -> satisfiable by torchlight/torchlight-laravel[v0.5.9, ..., v0.5.14].
    - torchlight/torchlight-commonmark[v0.5.0, ..., v0.5.2] require torchlight/torchlight-laravel ^0.5.5 -> satisfiable by torchlight/torchlight-laravel[v0.5.5, ..., v0.5.14].
    - torchlight/torchlight-commonmark[v0.1.0, ..., v0.4.1] require league/commonmark ^1.5 -> found league/commonmark[1.5.0, ..., 1.6.7] but the package is fixed to 2.4.2 (lock file version) by a partial update and that version does not match. Make sure you list it as an argument for the update command.
    - torchlight/torchlight-laravel[v0.5.0, ..., v0.5.10] require illuminate/support ^7.26.0|^8.0 -> found illuminate/support[v7.26.0, ..., v7.30.6, v8.0.0, ..., v8.83.27] but these were not loaded, likely because it conflicts with another require.
    - torchlight/torchlight-laravel[v0.5.11, ..., v0.5.12] require illuminate/support ^7.26.0|^8.0|^9.0 -> found illuminate/support[v7.26.0, ..., v7.30.6, v8.0.0, ..., v8.83.27, v9.0.0, ..., v9.52.16] but these were not loaded, likely because it conflicts with another require.
    - torchlight/torchlight-laravel v0.5.13 requires illuminate/support ^7.26.0|^8.0|^9.0|^10.0 -> found illuminate/support[v7.26.0, ..., v7.30.6, v8.0.0, ..., v8.83.27, v9.0.0, ..., v9.52.16, v10.0.0, ..., v10.48.10] but these were not loaded, likely because it conflicts with another require.
    - torchlight/torchlight-laravel v0.5.14 requires illuminate/support ^8.0|^9.0|^10.0 -> found illuminate/support[v8.0.0, ..., v8.83.27, v9.0.0, ..., v9.52.16, v10.0.0, ..., v10.48.10] but these were not loaded, likely because it conflicts with another require.
    - Root composer.json requires torchlight/torchlight-commonmark * -> satisfiable by torchlight/torchlight-commonmark[v0.1.0, ..., v0.5.5].

Use the option --with-all-dependencies (-W) to allow upgrades, downgrades and removals for packages currently locked to specific versions.
You can also try re-running composer require with an explicit version constraint, e.g. "composer require torchlight/torchlight-commonmark:*" to figure out if any version is installable, or "composer require torchlight/torchlight-commonmark:^2.1" if you know which you need.

Installation failed, reverting ./composer.json and ./composer.lock to their original content.

I also tried to remove composer.lock and rerun the command, but it shows the same error.

Dark mode

The Torchlight config has support for dark mode but when I configure it that way, it only renders one them. My configuration looks like this:

    // If you want to use two separate themes for dark and light modes,
    // you can use an array to define both themes. Torchlight renders
    // both on the page, and you will be responsible for hiding one
    // or the other depending on the dark / light mode via CSS.
    'theme' => [
        'dark' => 'github-dark',
        'light' => 'winter-is-coming-light',
    ],

Am I doing something wrong?

Commonmark 2

Just started a fresh Laravel app (๐Ÿ‘€), which comes with Commonmark v2 pre-installed - see composer.json.

Although, when I go to pull in this Torchlight Commonmark package into my app, it doesn't let me as it only supports v1.5 upwards.

I can't really downgrade because I'm using a v2 extension for handling front-matter stuff. I forked this project to try and update it for v2 but I failed ๐Ÿ˜‚

Not sure how much work would be involved in making it work with Commonmark v2?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.